组件版本
{
"vue": "^3.5.13",
"vue-router": "^4.5.0"
}
问题
项目通过动态的权限校验进行路由的增删，在 vue3 中使用addRoute添加路由后，刷新页面后不生效。
分析
刷新页面后报错，未发现路径未"xxxx"的路由，网上也有很多类似的问题。
vueRouter 中该报错未添加/配置该类型路由。
怀疑在路由守卫中进行权限判断时，动态路由加载还未完成。
No match found for location with path "xxxx"
每次浏览器按钮刷新都会执行一遍 main.js
实现 initRouter 函数在 app.use(router) 调用
1、实现 initRouter 函数
const initRouter = async () => {
// 此部分为一个返回路由定义的数组，数组有不同路由对象组成
// 一般根据调接口获取路由权限动态生成
const res = [
user, list
]
res.forEach((route) => {
router.addRoute(route)
})
}
2、在 app.use(router) 前调用
// 保证在 app.use(router) 前调用接行
// 可通过配置文件引入
await initRouter()
完整代码
// 动态授权，需要身份验证才能访问的路由
const initRouter = async () => {
const res = [
user, list
]
res.forEach((route) => {
router.addRoute(route)
})
}
// 此处不使用 await 语法也未报错，但路由的增删除基本是异步的
await initRouter()
// 全局路由守卫
router.beforeEach(async (to, from) => {
const hasToken = getToken()
if (hasToken) {
// 业务逻辑
} else {
// 业务逻辑
}
})
