vue刷新左菜单消失_vue+Element框架menu菜单刷新后保持选中状态

一直以来没有养成记录分享的习惯,后面发现这样很不好,所以开了自己的博客园,希望和大家一起进步!

前段时间用vue+Element做了一个后台项目，其中用Element的menu菜单组件的时候遇到一个问题。点击选中某个菜单，刷新后，选中状态会消失。苦思无果，于是网上查看了一下，很多都写到用default-active属性进行设置,至于设置方法对于小白来说看的有点懵.后来终于看到一个大神写的方法很简单好用,所以记录下来!

其实很简单,在路由设置里给每个页面跳转项设置一个name属性,属性值就是el-menu-item 里面的index值,具体看下图:

现在路由中为每个跳转的页面配置name属性,属性值就是el-menu-item 里面的index值,菜单组里面的default-active设置一个属性active进行绑定.

绑定一个自定义属性active,用来控制当前选中哪个菜单.

接下来只要在页面渲染的时候让active等于当前路由下的name属性就可以了,这样刷新后选中状态依然保留了!

第一次写随笔记录,大神勿喷!

vue刷新左菜单消失_vue+Element框架menu菜单刷新后保持选中状态相关推荐

element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
vue复选框默认被选中_vue .js绑定checkbox并获取、改变选中状态的实例
vue .js绑定checkbox并获取.改变选中状态的实例 2019-01-07 编程之家收集整理的这篇文章主要介绍了vue .js绑定checkbox并获取.改变选中状态的实例,编程之家小编觉得挺 ...
vue面试有哪些插件_vue 前端框架面试问题汇总
1 active-class是哪个组件属性.嵌套路由怎么定义? 解.vue-router 模块的router-link 组件 2 怎么定义vue-router动态路由?怎么获取传过来的动态参数? 解. ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
vue js时分秒计时器_Vue js框架的倒数计时器
vue js时分秒计时器 VUE倒计时 (vue-count-down-timer) This is a count down timer for Vue js framework. This lib ...
vue+echarts 后台获取数据_vue+element+echarts 响应式后台管理系统，了解一下？
寒假结束了,趁着寒假,自己玩了一下element和echarts去实现了一个简单的后台管理系统. 项目比较简单,十分适合入门,涉及到了轮播图,表格,表单,echarts柱形图和折线图,以及网页的响应式 ...
vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码
vue点击切换显示隐藏 *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ backg ...
vue怎么截取时间年月_Vue + Element 获取标准时间、时间戳进行转换与操作（年月日）...
如图获取标时间原生Date格式(Thu Aug 20 2020 14:55:18 GMT+0800 (中国标准时间)),并转换成 2020-08-20 模式 getTime (time) { var ...
vue限制只能输入数字_vue+element 中 el-input框限制只能输入数字及一位小数
仅个人经验,希望能帮到有需要的人. 第一次写就话不多说了直接上代码. // 只能输入数字且只有一位小数 proving(e) { // this.form.skus[e].Price 是input的 ...
vue中tab选项卡刷新页面后保持选中状态_Altium Designer中的快捷键汇总
双十一活动详情请联系客服了解在任何软件环境中,为了提高工作效率,你可以做的一件事就是学习快捷键.击键比将鼠标小心地放在按钮上或点击菜单来查找命令更有效,一旦用熟悉了,它们就变成了您的第二天性.本文将 ...

vue刷新左菜单消失_vue+Element框架menu菜单刷新后保持选中状态

vue刷新左菜单消失_vue+Element框架menu菜单刷新后保持选中状态相关推荐

最新文章

热门文章