elementUI的导航栏怎么根据路由默认选中相关项

时间:2023-03-09 22:53:25
elementUI的导航栏怎么根据路由默认选中相关项

1.

<el-menu :default-active="this.$route.path.substr(1)" class="left-nav">

2.

el-submenu或者el-menu-item的index设置成路由对应的字符串
比如:路由为http://localhost:8080/#/project/list时,将需要被选中的el-submenu或者el-menu-item的index设置为 index="project/list"
----------------------------------------------------------------------------------加强版-----------------------------------------------------------------------------------------------
也是根据路由选择左侧导航栏,但是路由可能有不固定的参数,那就根据固定的参数来判断选择哪一项:
html: 
  <el-menu :default-active="activedMenu" class="left-nav" :collapse="isCollapse">
<el-menu-item index="project" @click="changeRoute('/project/list')">
<i class="iconfont icon-icproject"></i>
<span slot="title">项目管理</span>
</el-menu-item>
<el-submenu index="operation">
<template slot="title">
<i class="iconfont icon-icoperation"></i>
<span slot="title">运营管理</span>
</template>
<el-menu-item index="operation/test" @click="changeRoute('/operation/test')">
<i class="fa fa-list-alt"></i>考试题
</el-menu-item>
</el-submenu>
</el-menu>

ts:

  get activedMenu() {
if (this.$route.path.indexOf('/project') == 0) {
return 'project'
} else if (this.$route.path.indexOf('/operation/test') == 0) {
return 'operation/test'
}
}

此时如果路径为:/project/12/···就可以根据开头“/project”定位到相应的左侧栏