奇技淫巧:解决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(),不能实现需要先请求后端拉取路由信息的方式。

相关推荐
醉の虾12 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
chusheng184034 分钟前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
游走于计算机中摆烂的1 小时前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
码蜂窝编程官方2 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
乐闻x3 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
533_4 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
ZBY520315 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
计算机毕设指导65 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
木子02046 小时前
前端VUE项目启动方式
前端·javascript·vue.js