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”定位到相应的左侧栏

转载于:https://www.cnblogs.com/XHappyness/p/7682944.html