vue使用动态路由后，页面不能刷新的问题

锋行天下2024-02-25 11:16

问题描述：使用动态路由后页面不能刷新，一刷新就找不到页面或者空白

本来录了一个问题视频，但是掘金只支持西瓜视频链接，没有办法，我就把视频传到我的服务器
vue3项目使用动态路由后，页面不能刷新的问题

在网上一搜，答案大多是说要把路由模式history改为hash模式

但是不管用，至少在我这不管用，还有说在服务端nginx加配置的，先不说这种方式管不管用，我开发时候的问题怎么解决？

问题大致结构

登陆时会返回该用户的所有能看到的菜单，然后把菜单数据存到sessionStorage里
登陆后触发vuex的一个动态添加路由的函数

解决问题的办法

经过我不懈努力的瞎写，不小心把问题解决了

javascript 复制代码

...
let  Modules=import.meta.glob("../views/*.vue")
...
...
...
//以上时路由文件的其他内容

function addRotesFunc(){
//登陆后我把后端返回的菜单数据存到sessionStorage里里
let  menu=JSON.parse(sessionStorage.getItem("menu"))
  if(!menu) return
  let children=menu.map(item=>{
    return {
      path:item.path,
      component: Modules[`${item.description}`] // 我把路由地址存在description字段里里，不要诧异，就是这么随意，Modules里有所有路由文件
    }
  })
  //把所有数据添加到/system的二级路由里，这个随意，不是标准
  router.addRoute({
    path: '/system',
    name: 'System',
    component:()=>import('../components/main.vue'),
    children:[...children]
  })
  //最后把404页面加上，我看都这么写，
  router.addRoute(
    {
      path: '/*',
      component: ()=>import('../views/404.vue')
    }
  )
}
addRotesFunc() //最后把函数调用一下，因为获取菜单可能获取不到（比如清空了），所以要加判断，但是又不能return阻断往下运行，所以包装一个addRotesFunc函数，获取不到菜单就不执行添加路由的代码
export default router

加上这些代码后，随便刷新就没有问题了

思考问题原因

我猜测大概是由于代码执行顺序的问题，路由文件优先级比较高，js单线程异步的特点，导致刷新后路由文件执行时没有生成动态的路由，仅仅是猜测，我自己也不能自圆其说