如何解决基于Vue动态菜单刷新后出现的空白问题？

本文共计976个文字，预计阅读时间需要4分钟。

1. 首先确认在 route.js 或 main.js 中是否有使用路由守卫 vue.beforeEach 和路由添加方法 vue.addRouters()。如果使用这些，每次页面刷新都会重新加载路由，就像在登录时执行的操作一样。

1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新，重新根据后台返回数据生成动态路由，就像你在登陆时做的事情一样。

代码示范注意点：

//注意：确定自己避免了路由守卫进入死循环 let oneRun = true; //通过oneRun变量控制 避免陷入死循环 router.beforeEach((to,from,next)=>{ if(oneRun){ oneRun = false;//必须在creatNewRouter() 执行 createNewRouter(); next({...to, replace: true})// 必不可少的，确保你的动态路由创建成功再去执行其它代码 } }) function createNewRouter(){ //请在这里做你登陆之后所做的创建动态路由的事情 一模一样去做。 //不要用缓存，session或localstorage 否则会报错。你需要重新发出请求 登陆怎么做的 这里就怎么做的 };

2. 如果你发现刷新之后成功了但回退发生了问题 请把路由模式切换成 history vue-route 默认使用hash模式。也就是地址上出现眨眼的 /#/ 当然 history模式本体跑没问题 发包后 需要后端配置 后端配置指导链接 把链接复制发2给后端同学即可。