Vue+Element-ui实现左侧二级导航（可配置路由、所有路由层级可统一、可根据路由高亮菜单项、刷新时可自动展开定位到当前路由）

这里使用的Element文档版本是2.13.1。

路由文件index.js：

import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' import Main from '@/components/Main' import Form from '@/components/Form' import Data from '@/components/Data' import Radio from '@/components/Radio' import Checkbox from '@/components/Checkbox' import Table from '@/components/Table' import Tag from '@/components/Tag' import Button from '@/components/Button' import Tabs from '@/components/Tabs' import Echarts from '@/components/Echarts' import Dialog from '@/components/Dialog' import Tree from '@/components/Tree' Vue.use(Router); let router = new Router({ mode: 'hash', routes: [ { path: '/', name: 'index', redirect: '/login' }, { path: '/login', name: 'login', component: Login, meta: { title: 'Login' } }, { path: '/main', alias: '/main', name: 'main', component: Main, meta: { title: 'Main' }, children: [ { path: '/main/form', alias: '/form', name: 'form', component: Form, meta: { title: 'Form', icon: 'el-icon-eleme', requireAuth: true }, children: [ { path: '/main/form/radio', alias: '/radio', name: 'radio', component: Radio, meta: { title: 'Radio', requireAuth: true } }, { path: '/main/form/checkbox', alias: '/checkbox', name: 'checkbox', component: Checkbox, meta: { title: 'Checkbox', requireAuth: true } } ] }, { path: '/main/data', alias: '/data', name: 'data', component: Data, meta: { title: 'Data', icon: 'el-icon-upload', requireAuth: true }, children: [ { path: '/main/data/table', alias: '/table', name: 'table', component: Table, meta: { title: 'Table', requireAuth: true } }, { path: '/main/data/tag', alias: '/tag', name: 'tag', component: Tag, meta: { title: 'Tag', requireAuth: true } } ] }, { path: '/main/button', alias: '/button', name: 'button', component: Button, meta: { title: 'Button', icon: 'el-icon-s-order', requireAuth: true } }, { path: '/main/tabs', alias: '/tabs', name: 'tabs', component: Tabs, meta: { title: 'Tabs', icon: 'el-icon-s-flag', requireAuth: true } }, { path: '/main/echarts', alias: '/echarts', name: 'echarts', component: Echarts, meta: { title: 'Echarts', icon: 'el-icon-s-data', requireAuth: true } }, { path: '/main/dialog', alias: '/dialog', name: 'dialog', component: Dialog, meta: { title: 'Dialog', icon: 'el-icon-phone', requireAuth: true } } ] }, { path: '/tree', alias: '/tree', name: 'tree', component: Tree, meta: { title: 'Tree', icon: 'el-icon-s-marketing', requireAuth: true } } ] }); export default router router.beforeEach((to, from, next) => { let islogin = localStorage.getItem("islogin"); islogin = Boolean(Number(islogin)); if(to.path == "/login"){ if(islogin){ next("/main/form/radio"); }else{ next(); } }else{ // requireAuth:可以在路由元信息指定哪些页面需要登录权限 if(to.meta.requireAuth && islogin) { next(); }else{ next("/login"); } } })

关键：除了login之外，其它都加上alias属性。

Main.vue：

<template>
  <div id="app">
    <el-container style="height: 100%;">
      <el-header style="height: 80px;" :style="topBg">
        <Header />
      </el-header>
      <el-container>
        <el-aside width="210px" :style="leftBg">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="none"
                text-color="#fff"
                active-text-color="#ff0000"
              >
                <template v-for="route in this.$router.options.routes[2].children">
                  <!-- 循环有子目录的菜单 -->
                  <el-submenu
                    :key="route.alias"
                    :index="route.alias"
                    v-if="route.children && route.children.length"
                  >
                    <template slot="title">
                      <i :class="route.meta.icon"></i>
                      <span>{{route.meta.title}}</span>
                    </template>
                    <el-menu-item-group>
                      <router-link
                        :to="subroute.alias"
                        :key="subroute.alias"
                        v-for="subroute in route.children"
                      >
                        <el-menu-item :index="subroute.alias">{{subroute.meta.title}}</el-menu-item>
                      </router-link>
                    </el-menu-item-group>
                  </el-submenu>
                  <!-- 循环有子目录的菜单 -->

                  <!-- 循环没有子目录的菜单 -->
                  <router-link
                    :to="route.alias"
                    :key="route.alias"
                    v-else-if="!route.children && route.alias != '/' && route.alias != '/login'"
                  >
                    <el-menu-item :index="route.alias">
                      <i :class="route.meta.icon"></i>
                      <span slot="title">{{route.meta.title}}</span>
                    </el-menu-item>
                  </router-link>
                  <!-- 循环没有子目录的菜单 -->
                </template>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
<script>
import Header from "@/components/Header";
export default {
  name: "App",
  data() {
    return {
      leftBg: {
        background:
          "#235d8b url(" +
          require("../assets/left-bg.png") +
          ") no-repeat scroll 0 bottom"
      },
      topBg: {
        background:
          "#235d8b url(" +
          require("../assets/top-bg.png") +
          ") no-repeat scroll right 0",
        height: "80px",
        fontSize: "32px",
        color: "#ffffff"
      }
    };
  },
  components: {
    Header
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>
 
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  line-height: 80px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-aside a {
  text-decoration: none;
}

.el-menu {
  background: none;
  border-right: 0;
}

.el-submenu__title{
  background: none!important;
}

.el-menu-item-group .el-menu-item {
  padding-left: 52px !important;
}
.el-menu-item{
  background: none!important;
}
.el-menu-item.is-active {
  color: #409eff;
  background: #ffffff!important;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  padding: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

其中关键是：

根据路由高亮list、刷新自动展开定位路由由这个来控制：

:default-active="$route.path"

循环路由：

<template v-for="route in this.$router.options.routes[2].children">......</template>

另一个关键：

'<el-menu>'中的'<router-link></router-link>'，不然没法导航到相关组件。

Form.vue、Data.vue组件模板中需要添加'<router-view></router-view>'。