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

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

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

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

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

问题大致结构

  1. 登陆时会返回该用户的所有能看到的菜单,然后把菜单数据存到sessionStorage里
  2. 登陆后触发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单线程异步的特点,导致刷新后路由文件执行时没有生成动态的路由,仅仅是猜测,我自己也不能自圆其说

相关推荐
qq_364371721 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
你挚爱的强哥6 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
天天进步20159 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz10 小时前
游戏引擎学习第20天
前端·学习·游戏引擎