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

liangdsh

已于 2022-03-12 23:54:40 修改

阅读量1.5k

点赞数

分类专栏：前端 Vue 文章标签： vue.js javascript elementui hash 菜单高亮

于 2022-03-12 23:53:56 首次发布

本文链接：https://blog.youkuaiyun.com/liangdsh/article/details/123452740

版权

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

Vue

1 篇文章

订阅专栏

本文介绍了在Vue项目中使用Element-UI如何根据URL的hash值动态实现菜单高亮。主要步骤包括：将<el-menu>的default-active属性改为defaultActive，设置activePath变量存储当前hash，mounted()阶段初始化hash，以及通过watch监听$route对象并处理路径以实现高亮效果。测试证明，这种方法能确保页面刷新和导航时菜单始终保持正确高亮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

1. <el-menu>中绑定属性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)
    },
  },
},

总结:

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