一：解决刷新时，侧边栏选中状态丢失或者选中状态与TAB页面不符合。
| select | 菜单激活回调 | index: 选中菜单项的 index, indexPath: 选中菜单项的 index path |
| default-active | 当前激活菜单的 index | string | — | — |
- 1.给菜单绑定一个属性为activeMenu
- 2.在data中定义一个activeMenu的初始值为第一个选项或者为空
- 3.在菜单激活的回调事件中，把index赋值给activeMenu
<div class="px-config-page">
<div class="config-page-left">
<el-menu @select="MenuSelect" :default-active="activeMenu" >
<el-submenu index="1">
<!--<el-menu-item index="2-1">xx</el-menu-item>-->
<el-menu-item index="pxInformation">xx</el-menu-item>
<el-menu-item index="pxSetting" v-if="myRights.PXCSSZ =='1'">xx</el-menu-item>
<!--<el-menu-item index="pxSearch">xx</el-menu-item>-->
</el-submenu>
</el-menu>
</div>
<div class="config-page-content">
<router-view></router-view>
</div>
</div> export default {
data() {
return {
activeMenu: 'pxInformation', // 初始值
activeMenu: localStorage.getItem('activeMenu') || 'pxInformation',
};
}, methods: {
MenuSelect(index, path) {
console.log(index);
this.activeMenu=index;
localStorage.setItem('activeMenu', index);
}
}刷新前的时候会选中侧边栏B，刷新后选中的是侧边栏A，为什么？
这是因为每次刷新页面时，Vue 组件都会被重新创建，data 中的数据会被重新初始化，所以 activeMenu 的值会被重置，并非上一次在menuSelect对其进行赋值的index。
要解决这个问题，你可以将 activeMenu 的值存储在浏览器的 localStorage 中。这样，即使页面刷新，activeMenu 的值也能保持不变。
这个方法虽然有一定的效果，但是确不是最好的，可以解决刷新页面的时候选项及选中效果不掉。二、解决从导航菜单点进来的时候，如果选中的是侧边栏B ，但是显示的是侧边栏A，对应的TAB页面又是侧边栏B的页面。针对这个问题应该如何解决呢？
首先我们要使用watch侦听：
重复以上的步骤，
一：定义
<el-menu @select="MenuSelect" :default-active="activeMenu" >二：在data中定义变量activeMenu为空
三：在方法中进行赋值文章来源：https://www.toymoban.com/news/detail-527928.html
MenuSelect(index, path) {
this.activeMenu=index;
}四：侦听路由信息变化，因为导航菜单是通过路由进行跳转的，侦听路由，拿到$route对象中的name,赋值给当前激活菜单的 index，就可以很好的解决这个问题。文章来源地址https://www.toymoban.com/news/detail-527928.html
watch:{
'$route':{
handler(newVal) {
this.activeMenu=newVal.name
},
immediate: true,
}
}到了这里，关于解决刷新或者重新点击导航栏，对应的侧边栏选中状态丢失或TAB页面与选中状态不符合的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
