vue动态添加路由

icon2024年10月31日
icon77

后端老哥让我根据账号不同使用两套路由表，于是乎我被折磨了一天......

问题（1）：为什么我的路由不会变！！！😡

我在router.js中创建了两个路由分别是router_1和router_2,然后创建函数判断，按理说这个是没问题的，但是页面就是不显示，只有刷新一次才行，思来想去最后发现userinfo写错位置了，router.js中我把获取userinfo写在了函数外面，这就导致默认获取的是null了，写在函数中，函数执行时候调用，而函数有是在路由守卫中调用，这时候是可以获取的这个信息的。错一个位置改了半天😭

const userinfo = JSON.parse(localStorage.getItem('__userInfo') || 'null')
const setRouter = () => {

  const username = userinfo?.username
  const email = userinfo?.email
  // 清空子路由，避免重复添加
  baseRoute.children = baseRoute.children.filter((child: any) => child.name === 'index')
  if (username == 'linshi' && email == 'linshi@canglankeji.com') {
    baseRoute.children.push(...router_2)
  } else {
    baseRoute.children.push(...router_1)
  }
}

问题（2）：为什么我页面刷新后会重定向到首页！！！😡

问题如题，上个问题解决后我注意到我在刷新页面时候页面会重定向到首页，我发现应该是我在路由守卫中调用这个函数然后导致页面重新渲染，而在渲染的时候就会导致这时候的路进行重定向(因为没有目标路由)

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('__token')
  if (!token && to.name !== 'login') {
    next({ name: 'login' })
  } else {
    setRouter()
    router.addRoute(baseRoute)

    next() // 放行
  }
})

于是乎我尝试在登陆时候使用addRoute()进行更行路由表，但是这样有两个问题，一个是我的路由已经写好页面很多，二是这样的话这个路由还要进行保存不然刷新页面就会丢失，最后我发现在路由守卫前调用这个函数并且更新路由就可以了，更新后的代码如下，只用再调用一次，这种感觉就像是代码以一种奇怪的方式运行起来了🤣，但是我对这样写法的理解是我刷新时候router.js会执行吧，这时候先调用一次更新了路由表，这时候到了路由守卫再次更新，这时候是有路由的，所以不会跳转......反正不管怎么说这个bug解决了不是么

setRouter()
router.addRoute(baseRoute)
// console.log('路由设置成功-1', routes)
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('__token')
  if (!token && to.name !== 'login') {
    next({ name: 'login' })
  } else {
    setRouter()
    router.addRoute(baseRoute)
    // console.log('路由设置成功-2', routes)
    next() // 放行
  }
})

最后我想说的，我的技术好菜~

热门文章