vue Element UI 导航高亮
1. activeIndex 为默认高亮值,根据改变activeIndex的值来改变高亮的值
当页面改变的时候获取当前的路由地址,截取第一个 / 后面的值,就是当前的高亮值了
为什么要截取呢?
因为点到子集页面的时候,刷新页面找不到路由,所以在设置路由的时候就要注意了,是两层了(例如:/list/details)
<template> <el-menu :default-active="activeIndex" class="el-menu-demo headnav" mode="horizontal" router> <el-menu-item v-for="(item,index) in nav" :index="item.path">{{item.title}}</el-menu-item> </el-menu> </template> <script> export default{ name:'Head', data(){ return{ activeIndex:'', nav:[ {title:'进度管理',path:'/projectlist'}, {title:'采集监控',path:'/controlList'}, {title:'任务管理',path:'/tasklist'}, ] } }, mounted(){ this.activeIndex = "/"+this.$route.path.split("/")[1]; } } </script>