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

使用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 导航菜单刷新状态不消失,显示对应的路由界面操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • vue项目刷新当前页面的三种方法

    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载,Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种: 但是,试过的会发现用vue-router重新路由到当前页面,页面是不进行刷新的,根本

  • vue项目使用$router.go(-1)返回时刷新原来的界面操作

    在项目需求中,我们常常需要使用$router.go(-1)返回之前的页面,但是却发现,之前的界面,保持着上次跳转的状态,比如说:弹框未关闭之类的等等,..... 问题如下: 界面1 : 界面2使用$router.go(-1)返回上一次的界面 由于使用$router.go(-1)返回,导致之前的数据都保留,并未刷新原来的界面,如下:还是显示跳转前的弹框 解决方法1: 不要使用$router.go(-1),而是使用$router.push('某某某'),但是其实这种方法是不合理的,因为你可能跳转的页

  • vue相同路由跳转强制刷新该路由组件操作

    想必大家在平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建).而vue自身如果路由不变的情况下是不会这样做的,那么只能使用一些骚操作了. 1.在菜单的路由跳转上绑定一个随机query参数,例如时间戳或者随机数: this.$router.push({ path:"/xxx", query:{ t:Date.now(), }, }); 该操作会触发路由改变,但是组件内的状态没有初始化,因为组件没有被重建. 2.在路由容器上绑定key值: &

  • vue router带参数页面刷新或回退参数消失的解决方法

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456

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

    使用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.

  • 基于vue 动态菜单 刷新空白问题的解决

    1.先确认自己在route.js 或者 main.js 中有没有使用 路由守卫vue.beforeEach和vue.addRouters() 促使页面每次刷新,重新根据后台返回数据生成动态路由,就像你在登陆时做的事情一样. 代码示范注意点: //注意:确定自己避免了路由守卫进入死循环 let oneRun = true; //通过oneRun变量控制 避免陷入死循环 router.beforeEach((to,from,next)=>{ if(oneRun){ oneRun = false;//

  • ant design vue导航菜单与路由配置操作

    此功能包含: 1.根据动态路由自动展开与自动选择对应路由所在页面菜单 2.只展开一个子菜单 3.兄弟组件控制菜单与路由 <a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inlineCollapsed="$store.state.isCollapse" @click='select

  • vue实现导航菜单和编辑文本的示例代码

    导航菜单实例 <div id="main"> <!-- 激活的菜单样式为 active 类 --> <!-- 为了阻止链接在点击时跳转,我们使用了 "prevent" 修饰符 (preventDefault 的简称). --> <nav v-bind:class="active" v-on:click.prevent> <!-- 当菜单上的链接被点击时,我们调用了 makeActive 方法,

  • jquery实现美观的导航菜单鼠标提示特效代码

    jquery实现美观的导航菜单鼠标提示特效代码

    本文实例讲述了jquery实现美观的导航菜单鼠标提示特效代码.分享给大家供大家参考.具体如下: 这是一个奇妙的导航菜单鼠标提示特效,俗称"链接提示",鼠标放在导航菜单的链接上即可显示出该链接所指向网页的大致内容,提示用户到达需要的页面. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nav-tips-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

  • 解决vue项目刷新后,导航菜单高亮显示的位置不对问题

    1本人在学vue项目时遇到一个坑.在写vue项目头部导航时,比如点击第三个,刷新后,高亮状态显示在第一个: 现在是点击第三个页面 刷新后,是第一个页面高亮显示,但是因为路由路径没有改变页面内容还是第三个页面内容,改变的是导航的状态: 捯饬了好久才搞出来,伤的不轻,看控制导航状态的代码部分: 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0,触发点击事件contact时候会重新赋值,跳转路由,一旦刷新页面,这个checkindex的值就是0,所以要把这个checkindex值记

  • Vue页面手动刷新,实现导航栏激活项还原到初始状态

    场景描述:在页面中存在顶部导航和左侧导航,左侧导航和右侧内容区使用了命名视图实现,点击左侧导航的链接时,右侧内容区相应显示不同组件内容.问题:在当前链接手动刷新浏览器(例如:浏览器地址为/enterprise/list),顶部导航激活项还原到初始状态(这里默认是"工作台"项). 原理:每次刷新都会重新实例化Vue,也就是会调用created方法. <template> <el-menu :default-active="defaultActiveIndex&

  • vue动态菜单、动态路由加载以及刷新踩坑实战

    vue动态菜单、动态路由加载以及刷新踩坑实战

    目录 需求: 思路: 教训: 分享正文: 总结 需求: 从接口动态获取子菜单数据 动态加载 要求只有展开才加载子菜单数据 支持刷新,页面显示正常 思路: 一开始比较乱,思路很多.想了很多 首先路由和菜单共用一个全局route, 数据的传递也是通过store的route, 然后要考虑的俩个点就是一个就是渲染菜单和加载路由,可以在导航首位里处理路由,处理刷新. 还有一个地方就是菜单组件里展开事件里面 重新生成菜单数据,路由.大体思路差不多,做完就忘了..... 刷新的问题需要用本地缓存处理,之前一直

  • vue中改变选中当前项的显示隐藏或者状态的实现方法

    在vue中已经不像jq那样直接操作dom了,如果要指向当前选中项时,就不能再用jq的思路来做了,方法如下: 当指向一个状态的时候,只让指向的状态隐藏,其他项不变,如果项目中用了element-ui,那么操作起来会比较简单一些,这样设置: v-if="(row.id == currentId&&row.auditState==0)?checkState:!checkState" @mouseover="statehidden(row.id)" js中:

  • vue 导航内容设置选中状态样式的例子

    如图所示,我们一般需要切换的时候选中导航给个active样式, 而router-link 标签 在选中的时候  会自动给整个标签添加一个 router-link-active的class 可给router-link 标签里面的span.i标签如下设置,非常简单,下面是stylus的写法,不需要的话也可以写成平时的css写法 .router-link-active span i color: red 以上这篇vue 导航内容设置选中状态样式的例子就是小编分享给大家的全部内容了,希望能给大家一个参考

随机推荐