vue 导航菜单刷新状态不消失,显示对应的路由界面操作

网络编程 2024/11/17 佚名

2 0 1

金狮镖局 Design By www.egabc.com

使用vue element-ui框架构建公共导航栏（https://element.eleme.cn/#/zh-CN/component/menu）

按F5刷新就会返回默认定义的路由，使用 "$route.path" 刷新后还是在最新的一个路由：

<el-menu :default-active="$route.path"></el-menu>

补充知识：vue 动态菜单刷新空白解决方案

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给后端同学即可。

3. 如果你想了解更多

1.为什么用了缓存会失败？这是因为当你存入缓存时候用了JSON.stringify 这东西会改变 compoent对象让它少了一个 render函数。这里你可以打印出来你缓存之后又解析出来的路由比对一下而 addRouters()要求它接受的数组参数必须严格符合路由规则。

2.next({...to, replace: true}) 为什么必不可少呢？在hash模式下你的动态路由可能还没创建完成就跑其它代码了毕竟路由守卫是异步操作在history模式下可能没有这个问题未实测写上最好。

3.每次刷新发请求拿路由不合适？

继续缓存，但从缓存取出来路由之后，复写路由里面所有的compoent对象。复写方法很多，如递归遍历路由。然后 item.compoent = vueName; vueName也就是你导出来的vue文件变量。

以上这篇vue 导航菜单刷新状态不消失,显示对应的路由界面操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vue,导航菜单,刷新状态,路由界面

标签：

vue,导航菜单,刷新状态,路由界面

金狮镖局 Design By www.egabc.com

金狮镖局 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

金狮镖局 Design By www.egabc.com

评论“vue 导航菜单刷新状态不消失,显示对应的路由界面操作”

暂无vue 导航菜单刷新状态不消失,显示对应的路由界面操作的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

vue 导航菜单刷新状态不消失,显示对应的路由界面操作

vue,导航菜单,刷新状态,路由界面

前端开发基础javaScript的六大作用

解决vue-router路由拦截造成死循环问题

评论“vue 导航菜单刷新状态不消失,显示对应的路由界面操作”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接