成都网站建设设计

将想法与焦点和您一起共享

vue项目中导航菜单刷新状态未消失怎么解决-创新互联

vue项目中导航菜单刷新状态未消失怎么解决?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联公司一直在为企业提供服务,多年的磨炼,使我们在创意设计,成都全网营销到技术研发拥有了开发经验。我们擅长倾听企业需求,挖掘用户对产品需求服务价值,为企业制作有用的创意设计体验。核心团队拥有超过十多年以上行业经验,涵盖创意,策化,开发等专业领域,公司涉及领域有基础互联网服务成都托管服务器APP应用开发、手机移动建站、网页设计、网络整合营销。

使用vue element-ui框架构建公共导航栏

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

vue项目中导航菜单刷新状态未消失怎么解决

vue项目中导航菜单刷新状态未消失怎么解决

补充知识: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 否则会报错。你需要重新发出请求 登陆怎么做的 这里就怎么做的
};

网页名称:vue项目中导航菜单刷新状态未消失怎么解决-创新互联
标题路径:http://chengdu.cdxwcx.cn/article/ggeec.html