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