奇技淫巧:解决vue-router动态添加路由刷新时提示 No match found for location with path

当前端的路由是从后端获取并通过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(),不能实现需要先请求后端拉取路由信息的方式。

相关推荐
lorogy10 小时前
【VSCode配置】运行springboot项目和vue项目
vue.js·spring boot·vscode
秋野酱12 小时前
基于 Spring Boot + Vue 的 [业务场景] 管理系统设计与实现
vue.js·spring boot·后端
勘察加熊人12 小时前
vue模拟扑克效果
javascript·css·vue.js
William Dawson12 小时前
如何在 Vue 3 中实现百度地图位置选择器组件
前端·javascript·vue.js
QTX1873012 小时前
Vue 3 和 Vue 2 的区别及优点
前端·javascript·vue.js·node.js
小妖66614 小时前
noscript 标签是干什么的
前端·javascript·vue.js
dmy15 小时前
后端1小时上手vue开发到上线
前端·vue.js·vite
工业互联网专业17 小时前
基于springboot+vue的秦皇岛旅游景点管理系统
java·vue.js·spring boot·毕业设计·源码·课程设计·旅游景点管理系统
枫super19 小时前
Day-03 前端 Web-Vue & Axios 基础
前端·javascript·vue.js
计算机学姐19 小时前
基于SSM的校园美食交流系统
java·vue.js·mysql·spring·tomcat·mybatis·美食