当前端的路由是从后端获取并通过router.addRoute()
添加到vue-router时,为了避免页面刷新后由于没有路由报错或让用户重新登录,一般都会把用户信息保存到storage里,加载时再写到store中,或者重新请求获取路由列表,最后在路由守卫里做如下操作:
typescript
let tryToMatch = false
router.beforeEach(to => {
console.log('to path', to.fullPath)
if (to.matched.length === 0) {
// 加载过动态路由后还没有找到,那就跳转到404页面
if (tryToMatch) {
tryToMatch = false
return { name: '404' }
}
const store = useUserStore() // 获取piana store
// 判断有没有用户登录信息,没有调回登录页
if (!store.isLogin) {
return '/login'
}
// 如果有路由信息,就添加动态路由
if (store.resources.length > 0) {
addAsyncRoutes(store.resources)
}
tryToMatch = true
return to.path
}
return true
})
如果没有匹配到路由,就通过用户信息去添加动态路由,然后再重新路由到这个页面。
咋一看没有问题,运行起来也没有问题。但控制台却有一行警告:
csharp
[Vue Router warn]: No match found for location with path "/xxx"
vue-router在beforeEach
前发出了一个找不到路由的警告。这倒不影响运行,其实完全可以忽略。但你来都来了,肯定跟我一样,怎么能容忍一刷新就有一个警告呢?
结合在路由守卫里打印的日志来看,这个警告是在router.beforeEach()
之前发出来的,而这个main.ts
是在哪呢?
是在vue.use()
的时候触发的,而vue.use()
又会调用router.instal()
方法,但我肯定不会闲的去改源码,那么我们的目标就是在router.instal()
前把动态路由先加进去。
首先我看到router有个isReady()
函数,先看看它能不能再install前触发:
typescript
// ......
router.isReady().then(() => {
console.log('router is ready')
})
export default router
嗯,确实和它的名字一样,不可能在install前触发
那如果我把install函数换了,再去执行我想做的事情,然后再调用原来的install方法会怎么样呢?
typescript
const install = router.install
router.install = function (app) {
console.log('before router install')
install(app)
}
这下页面直接打不开了,这么做导致原方法中的this变成了undefined,进而导致报错。
那么有没有在不修改原方法的情况下,在方法前后执行别的操作,那要不要试试Proxy
呢。
typescript
// 代理处理器
const handler = {
// 当代理对象是个函数时,当调用函数会触发该方法
apply(t, i, a) {
console.log('before router install')
// t是目标对象(函数),i是被调用时的上下文对象,a是被调用时的参数数组
// 执行原函数
t.apply(i, a)
}
} as ProxyHandler<any>
router.install = new Proxy(router.install, handler)
我创建了一个router.install
的代理并覆盖router.install
方法,同时通过Handler
在函数调用时打印一条日志,由于router.install
没有返回值,所以直接apply就可以了
很好,那接下来只需把添加动态路由的逻辑移到handler里面就可以了
typescript
const handler = {
apply(t, i, a) {
const store = useUserStore()
if (store.resources && store.resources.length > 0) {
addAsyncRoutes(store.resources)
}
t.apply(i, a)
}
} as ProxyHandler<any>
router.install = new Proxy(router.install, handler)
收工。不过也有个缺点,handler中不能执行Promise后再去执行t.apply()
,不能实现需要先请求后端拉取路由信息的方式。