在el-menu组件里有这样一个属性，default-active用来表示当前激活菜单的 index
1、如果给default-active设置一个默认值，那么刷新页面时，会出现一个问题，即路由地址和菜单对应的index是不一致的。
<el-menu
router
default-active="/"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
image.png
如上图所示，当前页面应该是数据分析，路由地址是/analyse，但是刷新页面之后，菜单栏却变成了首页，这是因为default-active默认值设置的是‘/’
2、此时只需要绑定动态属性default-active，利用watch来监听路由变化，并赋值给default-active
绑定属性
:default-active="currentMenu"
使用watch监听路由变化
watch: {
$route(e) {
this.currentMenu = e.path; // e里面的是当前路由的信息
},
},
网友评论