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”定位到相應的左側欄


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM