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属性就可以了,这样刷新后选中状态依然保留了!

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

原文参考链接:https://www.jb51.net/article/130473.htm

posted @ 2019-08-19 20:32  一叶之修  阅读(8122)  评论(0编辑  收藏  举报