在Vue中element-ui实现随hash改变响应菜单高亮

在Vue中element-ui实现随hash改变响应菜单高亮

• 1. 中绑定属性default-active有时eslint会报错,按要求转为defaultActive
• 2. 设置一个变量 activePath 来控制 default-active
• 3. 在 mounted() 中加入 hash
• 4. watch监控 $route 对象,因拿到的值带有/,使用slice截断
• 总结:

1. 中绑定属性default-active有时eslint会报错,按要求转为defaultActive

:defaultActive="activePath"

2. 设置一个变量 activePath 来控制 default-active

data() {
  return {
    activePath: '',
  }
}

3. 在 mounted() 中加入 hash

mounted() {
  this.activePath = location.hash.slice(2)
},

4. watch监控 $route 对象,因拿到的值带有/,使用slice截断

watch: {
  $route: {
    deep: true,
    handler: function (to, from) {
      this.activePath = to.path.slice(1)
    },
  },
},

总结:

测试刷新页面, 前进, 后退 .菜单高亮都会跟随变化