vue 菜单高亮,多级菜单保持高亮

本文讲述了如何在Vue应用中实现多级路由跳转时保持左侧菜单高亮,通过在路由配置中添加childrenUrl参数,配合Vuex状态管理,监听路由变化并更新defaultActive状态,实现菜单高亮的持久化存储。

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

主要实现多级路由跳转后还想保持左侧菜单高亮。
在这里插入图片描述
1.在创建路由的时候给子路由多增加一个参数用来判断。

    {
      path: '/EchartsZz',
      name: '柱状图',
      component:EchartsZz,
      meta:{
        showfater: true
     },
      children:[
        {
          path: '/EchartsZz/EchartsZzs',
          name: '柱状图子',
          component:EchartsZzs,
          meta:{
            childrenUrl:'/EchartsZz' //childrenUrl用来判断,值设置为父路由的path
         },
        }
      ]
    },

2.左侧菜单栏

:default-active="defaultActive"//这里设置一个值defaultActive

这个defaultActive放到vuex中方便后续操作。
3.监听路由

  watch:{
    $route(to, from) {
      if(to.meta.childrenUrl){
        this.SetDefaultActive(to.meta.childrenUrl)
      }else{
        this.SetDefaultActive(this.$route.path)
      }
    }
  },

监听路由变化判断要跳转的路由中是否存在childrenUrl,存在则表示他是多级路由拿到他的childrenUrl给vuex中的defaultActive。
4.vuex设置

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    defaultActive:sessionStorage.getItem("isactive") || '' ,//菜单高亮的值
  },
  getters: {
  },
  mutations: {
    //修改菜单高亮的值
    SetDefaultActive(state,value){
      state.defaultActive = value
      sessionStorage.setItem('isactive', value);
    }
  },
  actions: {
  },
  modules: {
  }
})

修改vuex中的值并使用sessionStorage做到持久化储存避免页面刷新菜单高亮失效。

### Vue 实现多级下拉菜单的方法 在 Vue 中实现多级下拉菜单可以通过多种方法完成,以下是几种常见的解决方案及其最佳实践。 #### 方法一:纯 CSS 和 HTML 的点击触发多级菜单 这种方法利用原生的 HTML 结构和 CSS 样式来构建多级菜单,并通过 JavaScriptVue 控制其交互行为。这种方式简单高效,适合轻量化的项目需求[^1]。 ```html <template> <ul class="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Services ▾</a> <ul class="submenu"> <li><a href="#">Web Design</a></li> <li> <a href="#">Development ▸</a> <ul class="submenu"> <li><a href="#">Frontend</a></li> <li><a href="#">Backend</a></li> </ul> </li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </template> <style scoped> .menu { list-style-type: none; padding: 0; } .submenu { display: none; position: absolute; background-color: white; border: 1px solid #ccc; } .menu li:hover .submenu { display: block; } </style> ``` 此方法的核心在于 `hover` 和嵌套结构的设计,适用于简单的场景。 --- #### 方法二:结合 Vuetify 或 Element-UI 组件库 对于更复杂的业务逻辑或者需要快速开发的情况,可以借助成熟的前端框架(如 Vuetify、Element-UI),这些工具提供了内置的支持功能[^3]。 以下是一个基于 **Element-UI** 的递归组件实现: ```javascript <script> export default { name: 'RecursiveMenu', props: ['items'], }; </script> <template> <el-submenu v-if="item.children && item.children.length > 0" :index="item.path || ''" v-for="(item, index) in items" :key="index"> <template slot="title">{{ item.name }}</template> <recursive-menu :items="item.children"></recursive-menu> </el-submenu> <el-menu-item v-else :index="item.path" :key="item.name"> {{ item.name }} </el-menu-item> </template> ``` 上述代码展示了如何通过递归来动态加载 JSON 数据并渲染成多级菜单。 --- #### 方法三:关键词高亮增强用户体验 如果希望进一步提升用户的体验感,在展示搜索结果的同时支持关键词匹配与高亮,则可参考如下做法[^2]: ```html <template> <div @click="navigateToDetail(item)" v-for="(item, idx) in filteredItems" :key="idx"> <div v-html="highlightKeyword(item.title, searchQuery)"></div> </div> </template> <script> export default { data() { return { searchQuery: '', filteredItems: [] }; }, methods: { highlightKeyword(text, keyword) { const regExp = new RegExp(`(${keyword})`, 'gi'); return text.replace(regExp, '<span style="color:red">$1</span>'); } } }; </script> ``` 这种技术不仅可以用于普通的文本框输入过滤器,也可以扩展到复杂的数据表单中去应用。 --- ### 总结 以上介绍了三种不同的方式来创建一个多层折叠式的导航栏——从基础的手动编码样式定义直到依赖第三方插件自动处理一切细节;每种都有各自的优缺点以及适用范围,请根据实际项目的具体情况进行选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

优雅格子衫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值