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单线程异步的特点,导致刷新后路由文件执行时没有生成动态的路由,仅仅是猜测,我自己也不能自圆其说

相关推荐
并不会1 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、1 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜1 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师1 小时前
CSS的三个重点
前端·css
耶啵奶膘2 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^4 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie4 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic5 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿5 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具6 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端