当前位置: 首页 > news >正文

【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮

原文作者:我辈李想
版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。


文章目录

  • 前言
  • 一、Vue路由
  • 二、路由一级控制高亮(常用)
    • 1.vue中路由文件
    • 2.网址样式
    • 3.Vue文件
    • 4.$route的内容
  • 三、路由二级控制高亮
    • 1.vue中路由文件
    • 2.浏览器网址样式
    • 3.Vue代码
    • 4.$route的内容
      • $route.matched[1]
      • $route.matched[2]
    • 6.当路由超过三级时,二级路由依然生效
      • 浏览器网址
      • $route的内容
  • 四、可以衍生路由三级控制高亮


前言

el-menu 是element-ui的菜单组件,为网站提供导航功能的菜单。


一、Vue路由

这里需要vue路由的相关知识,需要自行学习。

二、路由一级控制高亮(常用)

1.vue中路由文件

需要注意的是path参数中开头为/

export default {path: '/personalCenter',name: 'personalCenter',meta: { title: '订单中心', parent: 'layout' },redirect: '/shoppingCart',component: () => import('@/views/personalCenter'),children: [{path: '/shoppingCart',name: 'shoppingCart',meta: { title: '我的购物车', parent: 'personalCenter' },component: ()=> import('@/views/personalCenter/module/shoppingCart.vue')},{path: '/archiveOrder',name: 'archiveOrder',meta: { title: '我的存档订单', parent: 'personalCenter'},component: ()=> import('@/views/personalCenter/module/archiveOrder.vue')},{path: '/myProgrammingOrder',name: 'myProgrammingOrder',meta: { title: '我的编程订单', parent: 'personalCenter'},component: ()=> import('@/views/personalCenter/module/myProgrammingOrder.vue')},]
}

2.网址样式

在这里插入图片描述

3.Vue文件

需要注意的是el-menu的default-active参数和el-menu-item的index参数。el-menu是基于当default-active和index一致时保持高亮(active)。一般我们设置default-active为this.$route。

<template><div class="user"><div class="menu"><el-menu:default-active="$route.path"class="el-menu-vertical-demo"@select="handleSelect"><template v-for="(item, index) in routes"><el-menu-item:key="index":index="item.path"><span slot="title">{{ item.meta.title }}</span></el-menu-item></template></el-menu></div><router-view class="info" /></div>
</template>
<script>
import tree from '@/utils/tree';
export default {components: {},data() {return {routes: tree(this.$router.getRoutes())[0].children[6].children};},computed: {},watch: {},created() {},methods: {handleSelect(val) {console.log(this.$route);this.$router.push(val);},navbar() {this.$nextTick(() => {this.routes = tree(this.$router.getRoutes())[0].children[6].children;this.routes.map(item=>{item.meta.title = this.$t(`layout.${item.name}`);});});}}
};
</script>

4.$route的内容

在这里插入图片描述

三、路由二级控制高亮

1.vue中路由文件

需要注意的是path参数中开头无/。

export default {path: '/personalCenter',name: 'personalCenter',meta: {title: '订单中心',parent: 'layout',isShow: true},redirect: '/personalCenter/shoppingCart',component: () => import('@/views/personalCenter'),children: [{path: 'shoppingCart',name: 'shoppingCart',meta: {title: '我的购物车',parent: 'personalCenter',isShow: true},component: () => import('@/views/personalCenter/module/shoppingCart.vue')},{path: 'archiveOrder',name: 'archiveOrder',meta: {title: '我的存档',parent: 'personalCenter',isShow: true},component: () => import('@/views/personalCenter/module/archiveOrder.vue')},{path: 'myProgrammingOrder',name: 'myProgrammingOrder',meta: {title: '我的下单',parent: 'personalCenter',isShow: true},component: () =>import('@/views/personalCenter/module/myProgrammingOrder.vue')},]
}

2.浏览器网址样式

在这里插入图片描述

3.Vue代码

<template><div class="user"><div class="menu"><el-menu:default-active="$route.matched[2].path"class="el-menu-vertical-demo"@select="handleSelect"><template v-for="(item, index) in routes"><el-menu-item:key="index":index="item.path"><span slot="title">{{ item.meta.title }}</span></el-menu-item></template></el-menu></div><router-view class="info" /></div>
</template>
<script>
import tree from '@/utils/tree';
export default {components: {},data() {return {routes: tree(this.$router.getRoutes())[0].children[6].children};},computed: {},watch: {},created() {},methods: {handleSelect(val) {console.log(this.$route);this.$router.push(val);},navbar() {this.$nextTick(() => {this.routes = tree(this.$router.getRoutes())[0].children[6].children;this.routes.map(item=>{item.meta.title = this.$t(`layout.${item.name}`);});});}}
};

4.$route的内容

$route.matched[1]

在这里插入图片描述

$route.matched[2]

在这里插入图片描述

6.当路由超过三级时,二级路由依然生效

浏览器网址

在这里插入图片描述

$route的内容

在这里插入图片描述
在这里插入图片描述

四、可以衍生路由三级控制高亮

这里我就不做示例了,兄弟们自行尝试吧。

http://www.lryc.cn/news/150656.html

相关文章:

  • 9.2 【C语言】使用结构体数组
  • leetcode原题: 最小值、最大数字
  • Prompt2Model: Generating Deployable Models from Natural Language Instructions
  • 前端埋点 sendBeacon 替代方式
  • 面试官问我MySQL和MariaDB的联系和区别,这我能不知道?
  • 1.网络空间搜素引擎
  • 《安富莱嵌入式周报》第321期:开源12导联便携心电仪,PCB AI设计,150M示波器差分探头,谷歌全栈环境IDX,微软在Excel推出Python
  • 前端开发必备的网站
  • Java运行时jar时终端输出的中文日志是乱码
  • Vue框架--Vue中el和data的两种写法
  • 【数据结构】 二叉树面试题讲解->贰
  • C和SystemVerilog联合仿真
  • 15-mongodb
  • CSS学习笔记02
  • 为什么Java接口可以多继承,而类不可以?
  • 自动化信息收集工具 水泽 使用教程
  • 2023年全国职业院校技能大赛(高等职业教育组)“信息安全管理与评估”理论技能答案
  • MATLAB 动态图GIF
  • ChatGPT⼊门到精通(4):ChatGPT 为何⽜逼
  • 数据分析基础-数据可视化学习笔记03-可视化的符号与表示-图形符号学
  • 暴力递归转动态规划(四)
  • 大数据项目实战(Sqoop安装)
  • android——spinner下拉弹窗、popupwindow下拉弹窗列表
  • 【阿里淘天】淘天20230824真题一、二 <模拟、双指针>
  • Java注解和反射
  • 【Docker】01-Centos安装、简单使用
  • k8s之存储篇---数据卷Volume
  • 博流RISC-V芯片JTAG debug配置与运行
  • [国产MCU]-W801开发实例-UART控制器
  • OpenCV(九):LUT查找表