el-menu刷新页面时,当前激活菜单的高亮问题

在el-menu组件里有这样一个属性,default-active用来表示当前激活菜单的 index
1、如果给default-active设置一个默认值,那么刷新页面时,会出现一个问题,即路由地址和菜单对应的index是不一致的


el-menu刷新页面时,当前激活菜单的高亮问题_第1张图片
image.png

如上图所示,当前页面应该是数据分析,路由地址是/analyse,但是刷新页面之后,菜单栏却变成了首页,这是因为default-active默认值设置的是‘/’

2、此时只需要绑定动态属性default-active,利用watch来监听路由变化,并赋值给default-active
绑定属性

:default-active="currentMenu"

使用watch监听路由变化

watch: {
  $route(e) {
    this.currentMenu = e.path;  // e里面的是当前路由的信息
  },
},

你可能感兴趣的:(el-menu刷新页面时,当前激活菜单的高亮问题)