uni-native-router

一个使用 typescript 封装 uniapp 原生路由 API 库，使用 uni-app 原生钩子实现和方法实现、hooks 的使用方式适配 vue3

介绍

1. 使用 uniapp 原生 api 封装，破坏性小，易于移植，使用上和原生差异小
2. 使用 Typescript 封装
3. 由于基于原生 API 封装，全平台兼容
4. 适配 vue3，可以使用类似Composition API开发
5. 封装了路由守卫功能
6. 可配置 404 页面拦截

安装

npm install --save uni-native-router
# or
yarn add uni-native-router

用法

创建 router.ts

import { createRouter } from 'uni-native-router'
export { useRoute, useRouter } from 'uni-native-router' // 导出适配vue3的hooks获取路由钩子方法
import pages from '@/pages.json' // 导入路由配置文件
import { App } from 'vue'

// 创建路由对象
export let router = createRouter({ routes: pages.pages })

// 设置路由器
export const setupRouter = (app: App) => {
  app.use(router)
}
// 路由请求前拦截
router.beforeEach(async (to: any, from: any, next: any) => {
  next()
})
// 路由请求后拦截
router.afterEach((to: any, from: any) => {
  // 逻辑代码
})

注意

创建路由对象的时候需要传入路由配置对象（即 pages.json 里面的配置）

如果使用vite构建，可以直接使用import pages from '@/pages.json'导入得到对应对象

如果使用webpack构建在打包的时候可能会拿不到路由对象，在此，编写了读取 pages.json 的工具，可参考read-pages

在 main.ts 入口文件注册

import { createSSRApp } from 'vue'
import App from '@/App.vue'
import { setupRouter } from './router'

export function createApp() {
  const app = createSSRApp(App)

  // 初始化路由
  setupRouter(app)

  return {
    app
  }
}

在组件或页面里面使用

<template>
  <view class="uni-native-router">
    <view class="jump-btn" @click="jump">路由跳转</view>
  </view>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { useRoute, useRouter } from '@/router'

  // state
  const _route = useRoute() // 获取路由元对象
  const router = useRouter() // 获取路由对象
  console.log(_route.query) // 路由参数 类似在 onLoad 里面的 options

  // 路由跳转
  const jump = () => {
    router.navigateTo({ url: 'pages/mine/index', query: { entry: 'mine' } })
  }
</script>

配置 404 页面

如果在pages.json里面找不到对应的路由会尝试找到pages.json里面的name为notfound的页面不限大小写

{
  "path": "pages/not-found/index",
  "name": "notfound",
  "style": {
    "navigationBarTitleText": "NotFound"
  }
}

创建路由对象

createRouter(CreateOptions)

此方法为创建路由对象，返回路由对象router

CreateOptions {
  routes: Route[] // 路由配置
  routeMethods?: string[] // 路由具有的方法
}

API

router.navigateTo(OBJECT)

此方法返回一个Promise对象

OBJECT 参数同uniapp

增加query参数对象，便于传参数，同时也兼容'path?key=value&key2=value2'写法

router.redirectTo(OBJECT)

此方法返回一个Promise对象

OBJECT 参数同uniapp

增加query参数对象，便于传参数，同时也兼容'path?key=value&key2=value2'写法

router.relaunch(OBJECT)

此方法返回一个Promise对象

OBJECT 参数同uniapp

增加query参数对象，便于传参数，同时也兼容'path?key=value&key2=value2'写法

router.switchtab(OBJECT)

此方法返回一个Promise对象

OBJECT 参数同uniapp

router.navigateBack(OBJECT)

此方法返回一个Promise对象

OBJECT 参数同uniapp

router.beforeEach(cb)

路由前置守卫

cb守卫回调函数会传to、 from、 next 参数进去，完成操作必须要调用next方法执行下一步

router.afterEach(cb)

路由后置守卫

cb守卫回调函数会传`to、 from 参数进去

License

MIT