【Vue】【求助】vue element 这样的路由规则，怎么设置左侧菜单高亮

问题描述：
左侧菜单，点击“客户”"可以高亮，“客户”页面有个新增按钮，点击新增的话，就进入到了新增页面，路由规则变了，请问如何还能让左侧的“客户”高亮？？？
【Vue】【求助】vue element 这样的路由规则，怎么设置左侧菜单高亮

路由规则如下：

{
path: '/kehu',
name: '客户',
component: Layout,
menu:true,
children:[
{ path: '/kehu/list',menu:true, name:'客户', component: () => import('@/views/kehu/list/index') },
{ path: '/kehu/list/create', menu:false, name:'新增', component: () => import('@/views/kehu/list/create') },
{ path: '/kehu/list/edit',menu:false, name:'编辑', component: () => import('@/views/kehu/list/edit') }
]
},

左侧菜单如下：

<el-menu
collapse-transition
:default-active="$route.path"
class="el-menu-vertical-demo"
background-color="#304156"
active-text-color="#409EFF"
text-color="#BFCBD9"
router
:collapse="isCollapse">
<template v-for="(item,index) in $router.options.routes" v-if="item.menu">
<el-submenu :index="item.name">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">{{item.name}}</span>
</template>
<el-menu-item
@click="clickroute(child.path)"
v-for="(child,indexs)  in item.children"
:index="child.path"
:key="child.path"
v-if="child.menu">{{child.name}}</el-menu-item>
</el-submenu>

回答

// 修改 el-menu 的default-active 属性为 :default-active="$route.path.split('/').slice(0,3).join('/')" 
<el-menu 
      collapse-transition
      :default-active="$route.path.split('/').slice(0,3).join('/')" 
      class="el-menu-vertical-demo"
      background-color="#304156"
      active-text-color="#409EFF"
      text-color="#BFCBD9"
      router
      :collapse="isCollapse">

左侧为路由菜单，右侧tab标签项自己模拟渲染的菜单列表，tab是根据你左侧点击以后已存储的路由信息渲染，那么tab点击后调用路由跳转 $router.push 跳转, 对应 :default-active="$route.path" 能响应到，反之要对应，则需要在你的tab渲染逻辑处对路由变化监听做出判断，确定当前激活哪一项tab，以上是个简单描述，实现方法多种，望对你有帮助

this.$route获取路由信息，循环matched,判断左侧菜单的name是否在matched里面，如果存在就高亮菜单

补充-------------

:default-active="activeName"

computed: {
    activeName () {
      let activeName
      for (let i = 0; i < this.$route.matched.length; i++) {
        const route = this.$route.matched[i]
        if (route.name) {
          activeName = route.name
          break
        }
      }
      return activeName
    }
}

我觉得把新增和编辑做成弹窗比较好，也省区了这么多麻烦

以上是 【Vue】【求助】vue element 这样的路由规则，怎么设置左侧菜单高亮 的全部内容， 来源链接： utcz.com/a/80590.html

回到顶部