如何使用element-ui的el-menu導航選中后刷新頁面保持當前選中狀態

這篇文章給大家分享的是有關如何使用element-ui的el-menu導航選中后刷新頁面保持當前選中狀態的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

具體代碼如下所示：

<el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds" 
　　　　　　　　background-color="#bd1e22" text-color="#fff" active-text-color="#ffd04b"> 　　　　　　　　
　　　　　　　　//router當導航激活時允許以index作為路由進行頁面的跳轉,$route.path當前路由對象的路徑，字符串，絕對路徑 　　　　　　　　
　　　　　　　　//unique-opened只允許有一個下拉菜單處于打開的狀態 　　　　　　　　
　　　　　　　　//使用default-active來實現當前菜單激活的選項
　　　　　　　　//default-openeds當前打開的 sub-menu 的 index 的數組
<el-menu-item index=‘/home‘>首頁</el-menu-item>
      <el-submenu>
       <template slot="title">
        <i class=‘‘></i><span>導航一</span>
       </template>
       <el-menu-item index=‘/first/page1‘>
        <template slot="title">
         <i class=‘‘></i><span>選項一</span>
        </template>
       </el-menu-item>
       <el-menu-item index=‘/first/page2‘>
        <template slot="title">
         <i class=‘‘></i><span>選項二</span>
        </template>
       </el-menu-item>
      </el-submenu>
    </el-menu
>

mounted(){
      let path = this.$route.path;
      this.navConfig = [
        {index:'1',path:['/system/aa','/system/bb','/system/cc']},
      ];
      let thisNav = this.navConfig.find(item =>{
        return item.path.includes(path);
      });
      this.defaultOpeneds = [thisNav.index];
    }

ps：下面看下vue Element-ui el-menu 左側導航條

<template>
 <!--實現左側導航條動態渲染(三級)-->
 <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router unique-opened
 background-color="#545c64"
 text-color="#fff"
 active-text-color="#ffd04b">
 <el-menu-item index="/home/main">
 <i class="el-icon-document"></i>
 <span slot="title">首頁</span>
 </el-menu-item>
 <el-submenu v-for="(item,index) in content" :key="item.id" :data="item" v-if="item.children.length>0&&item.level==1" :index="item.linkname">
 <template slot="title">
 <i class="el-icon-location"></i>
 <span slot="title">{{item.linkname}}</span>
 </template>
 <el-submenu v-for="(child,seq) in item.children" :data="child" v-if="item.id==child.parentid&&child.children.length>0&&child.level==2" :key="child.id" :index="child.linkname">
 <span slot="title">{{child.linkname}}</span>
 <el-menu-item v-for="three in child.children" :data="three" v-if="child.id==three.parentid&&child.children.length!=0&&three.level==3" :key="three.id" :index="three.link">
 <span slot="title">{{three.linkname}}</span>
 </el-menu-item>
 </el-submenu>
 <!--2無子級顯示-->
 <el-menu-item v-for="(child,seq) in item.children" :data="child" v-if="item.id==child.parentid&&child.children.length==0&&child.level==2" :key="child.id" :index="child.link">
 <span slot="title">{{child.linkname}}</span>
 </el-menu-item>
 </el-submenu>
 <!--1無子級顯示且不支持點擊事件-->
 <el-menu-item v-for="(item,index) in content" :key="item.id" :data="item" v-if="item.children.length==0&&item.level==1" :index="item.linkname" :disabled="item.children.length==0 ? true : false ">
 <i class="el-icon-setting"></i>
 <span slot="title">{{item.linkname}}</span>
 </el-menu-item>
 </el-menu>
 </div>
</template>
<script>
import axios from "axios";
import $ from 'jquery';
export default {
 data() {
 return {
 content: [],
 isCollapse: false,
 defaultProps: {
 children: 'children',
 label: 'linkname'
 }
 };
 },
 mounted(){
 var _self = this;
 axios.get('https://5b90a18b3ef10a001445d08e.mockapi.io/api/v1/resources')
 .then(function (response) {
 _self.content = returnZhData(response.data);
 })
 .catch(function (error) {
 console.log(error);
 });
 },
 methods: {
 handleOpen(key, keyPath) {
 console.log(key, keyPath);
 },
 handleClose(key, keyPath) {
 console.log(key, keyPath);
 },
 handleNodeClick(content) {
 console.log(content);
 }
 }
}
function returnZhData(data){
 var arrone=[];
 $.each(data, function(index,one) {
 if(one['level'] == 1){
 arrone.push(one);
 var arrtwo=[];
 $.each(data, function(index,two) {
 if(two['level'] == 2 && two['parentid']==one['id']){
 arrtwo.push(two);
 var arrthree=[];
 $.each(data, function(index,three) {
 if(three['level'] == 3 && three['parentid']==two['id']){
 arrthree.push(three);
 }
 });
 two.children=arrthree;
 }
 });
 one.children = arrtwo;
 }
 });
 return arrone;
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
 width: auto;
 min-height: 400px;
}
</style>

感謝各位的閱讀！關于“如何使用element-ui的el-menu導航選中后刷新頁面保持當前選中狀態”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！