问题描述:使用动态路由后页面不能刷新,一刷新就找不到页面或者空白
本来录了一个问题视频,但是掘金只支持西瓜视频链接,没有办法,我就把视频传到我的服务器
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单线程异步的特点,导致刷新后路由文件执行时没有生成动态的路由,仅仅是猜测,我自己也不能自圆其说