uni-mini-router是一个基于vue3和uniapp轻量级的路由框架，它可以实现类似vue里的vue-Router的功能
在这里不得不说一下某些框架的官方路由库，啧啧啧，居然还要收费！
不过！！！ uni-mini-router这个库亲测好用，可以实现路由库该有的基本功能！！！
下面我们开始进行它的安装和配置说明
其官方地址是 ：Moonofweisheng/uni-mini-router (github.com)
安装
我们在项目根目录
Yarn
shell
yarn add uni-mini-router -Dnpm
shell
npm install uni-mini-router --save读取路由表
我们得先有路由表才能对路径的跳转进行控制和获取相应信息
这里其实有两种方式：uni-parse-pages和uni-read-pages-vite读取路由表，但是其中一种：uni-read-pages-vite 依赖vite编译时读取pages.json生成的路由表注入全局变量，换句话说uniapp在编译到小程序端时无法触发vite的热更新 （就是不能用的意思） ，所以我们这里只作uni-parse-pages的相关使用介绍
安装uni-parse-pages
先在项目根目录安装uni-parse-pages
Yarn
csharp
yarn add uni-parse-pages -DNpm
shell
npm install uni-parse-pages --save配置uni-mini-router
开始在项目里配置uni-mini-router
创建router文件夹
我们直接在项目根目录创建router文件夹，再在里面创建 index.js文件
配置router/index.js
在index.js文件中
js
import { createRouter } from 'uni-mini-router'
// 导入pages.json
import pagesJson from '../pages.json'
// 引入uni-parse-pages
import pagesJsonToRoutes from 'uni-parse-pages'
// 生成路由表
const routes = pagesJsonToRoutes(pagesJson)
const router = createRouter({
routes: [...routes] // 路由表信息
})
export default router配置main.js
js
import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'
export function createApp() {
const app = createSSRApp(App)
app.use(router)
return {
app
}
}配置pages.json
就是正常配置，不过需要使用name跳转页面时，需要在路由表中的相应页面对象中加入name属性
如
json
{
"pages": [
{
"path": "pages/index/index",
"name":"index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
....但是name值必须有唯一性！！！
在项目中使用
！！！注意： 只能name和params，path和query搭配使用
基本使用
在使用的时候和vue中的vue-router基本没什么太大区别
这里以push方法为例
html
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'uni-mini-router'
// 使用hooks（推荐）
let router = useRouter()
// 字符串路径
router.push('/user')
// 带有路径的对象
router.push({ path: '/user' })
// 只能`name`和`params`，`path`和`query`搭配使用
// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /user?username=eduardo
router.push({ path: '/user', query: { username: 'eduardo' } })
</script>如果在其他页面获取跳转时传递的参数，一般是使用onLoad生命周期函数
js
<script setup lang="ts">
import {onLoad } from '@dcloudio/uni-app' //vue3中setup写法需要自己导入生命周期函数
onLoad((option) => {
if (option && option.username) { //不管是使用query还是params传递参数，参数都是从
const username = option.username
}
})
</script>传递对象
值得一提的我们在跳转时传递对象参数的话建议把它转换成字符串再进行传参 ，不过字符串太长的话建议使用窗口通信 还有全局数据仓库
比如以下示例
javascript
<script setup >
import { useRouter } from 'uni-mini-router'
let router=useRouter()
let user={
name:'ggbond'
}
let gorouter=()=>{
router.push({name:'test',params:{user:JSON.stringify(user)}})
}
</script>在接收页面用**JSON.parse**转换过来就好
路由守卫
路由守卫有全局前置守卫 beforeEach和全局后置钩子 afterEach
全局前置守卫beforeEach
使用router.beforeEach注册一个全局前置守卫
js
const router = createRouter({ ... })
router.beforeEach((to, from, next) => {
// next入参 false 以取消导航
next(false)
})对于**beforeEach**三个参数的说明：
-
to: 即将要进入的目标 -
from: 当前导航正要离开的路由 -
next: 用于reslove这个beforeEach钩子，需要确保next在导航守卫中都被严格调用一次-
next(): 执行默认路由跳转逻辑 -
next(false): 终止跳转逻辑 -
next({ path: '/' }): 跳转到不同的页面 -
next({ path: '/', navType: 'replaceAll' }): 改变当前跳转类型并跳转到不同的页面，可以通过navType指定新的跳转类型。（实例为中断当前导航，改用replaceAll方法跳转到新的页面）
-
全局后置钩子afterEach
同理使用方法
js
const router = createRouter({ ... })
router.afterEach((to, from) => {
console.log(to)
console.log(from)
})上面两个参数的作用和beforeEach的一样
useRouter和useRoute
useRouter
useRouter返回Router
Router的实例方法
push方法
▸ router.push(target:RouteLocationRaw): void
保留当前页面，跳转到应用内的某个页面，相当于使用 uni.navigateTo(OBJECT)。
pushTab方法
▸ router.pushTab(target:RouteLocationRaw): void
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，相当于使用 uni.switchTab(OBJECT)。
replace方法
▸ router.replace(target:RouteLocationRaw): void
关闭当前页面，跳转到应用内的某个页面，相当于使用 uni.redirectTo(OBJECT)。
replaceAll方法
▸ router.replaceAll(target:RouteLocationRaw): void
关闭所有页面，打开到应用内的某个页面，相当于使用 uni.reLaunch(OBJECT)。
back方法
▸ router.back(level?: number): void
关闭当前页面，返回上一页面或多级页面，相当于使用 uni.navigateBack(OBJECT)。
useRoute
useRouter返回Route
Route记录着当前路由的信息