vue 使用element 后台管理界面 左侧导航和面包屑导航

最终效果

 路由配置

只有最底层的children才跳转显示视图

import Vue from 'vue'
import Router from 'vue-router'

import layout from '../pages/layout/index'

Vue.use(Router)

const constantRouter = [
  {
    path: '/',
    name: '首页',
    component: layout,
    children: [
      {
        path: '/one-1',
        name: '一级菜单-1',
        component: ()=> import('../pages/layout/appMain'),
        // redirect: '/two-1',
        children: [
          {
            path: '/two-1',
            name: '二级菜单',
            // redirect: '/three-1',
            component: ()=> import('../pages/layout/appMain'),
            children: [
              {
                path: '/three-1',
                name: '三级级菜单-1',
                component: ()=> import('../pages/layout/appMain'),
                children: [
                  {
                    path: '/fore-1',
                    name: '四级级菜单-1',
                    component: ()=> import( '../pages/asideBar/fore' ),
                  },
                  {
                    path: '/fore-2',
                    name: '四级级菜单-2',
                    component: ()=> import( '../pages/asideBar/fore2' ),
                  },
                ]
              }
            ]
          },
        ]
      },
      {
        path: '/one-2',
        name: '一级菜单-2',
        component: ()=> import( '../pages/asideBar/one2')
      },
    ]
  }
]


// const asyncRouter = [
//   {
//     path: '/asyncRouter',
//     name: 'asyncRouter',
//     component: ()=> import( '../pages/asyncRouter' )
//   }
// ]

export default new Router({
  routes: constantRouter
})

index.vue 首页

<template>
  <el-container class="index-container">
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">
        <!-- 左侧导航 -->
        <asideBar></asideBar>
      </el-aside>
      <!-- 面包屑导航 -->
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="item in levelList" :key="item.path">
            {{item.name}}
          </el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 右侧显示区域 -->
        <appMain></appMain>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import asideBar from './asideBar'
import appMain from './appMain'

export default {
  name: 'index',
  components: {
    asideBar,
    appMain
  },
  data() {
    return {
      levelList: null
    }
  },
  computed: {
 
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  methods: {
    getBreadcrumb() {
      //$route.matched一个数组 包含当前路由的所有嵌套路径片段的路由记录
      let matched = this.$route.matched.filter(item => item.name)
      this.levelList = matched
    }
  },
  created() {
    this.getBreadcrumb()
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }
  .index-container {
    height: 100%;
  }
</style>

appMain.vue  右侧路由跳转视图

<template>
  <div class="appMain-container">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'appMain',
    components: {},
    data() {
      return {}
    },
    computed: {},
    watch: {},
    methods: {},
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .appMain-container {
  }
</style>

asideBar.vue  左侧导航栏

<template>
  <div class="aside-container">
    <el-row class="tac">
      <el-col :span="24">
        <!-- 整体左侧导航 -->
        <el-menu
          router
          :default-active="$route.path"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <!-- 左侧导航栏抽取循环部分 将路由列表传给子组件-->
          <asideBarItem
            v-for="router in routers"
            :router="router"
            :key="router.path"
          >
          </asideBarItem>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import asideBarItem from './asideBarItem'
  export default {
    name: 'asideBar',
    components: {
      asideBarItem
    },
    data() {
      return {
      }
    },
    computed: {
      routers () {
        //console.log(this.$router.options)
        //this.$router.options获取路由列表
        return this.$router.options.routes[0].children
      }
    },
    watch: {},
    methods: {
      handleOpen(key, keyPath) {
        //点击打开时当前的路径
        //console.log(key, keyPath, 'handleOpen');
      },
      handleClose(key, keyPath) {
        //console.log(key, keyPath, 'handleClose');
      }
    },
    created() {
    },
    mounted() {
      // console.log(this.$router.options.routes[1])
    }
  }
</script>

<style lang="scss" scoped>
  .aside-container {
    height: inherit;
  }
</style>

asideBarItem.vue  递归左侧子导航

<template>
  <div class="asideBarItem-container">
      <!-- 如果hasOwnProperty监测有children 就循环递归展示-->
        <el-submenu
          :index="router.path"
          v-if="router.hasOwnProperty('children')" >
          <span slot="title">{{router.name}}</span>
          <!--递归子孙导航-->
          <asideBarItem
            v-for="(child, childKey) in router.children" :key="child.path"
            :router="child"
          >
          </asideBarItem>
        </el-submenu>
      <!-- 如果没有 就展示一级导航 -->
        <el-menu-item
          v-else
          :key="router.path"
          :index="router.path">
          {{router.name}}
        </el-menu-item>
  </div>
</template>

<script>
//hasOwnProperty可以用来检测一个对象是否含有特定的自身属性 
  export default {
    name: 'asideBarItem',
    props: {
      router: {
        type: Object
      }
    },
    components: {},
    data() {
      return {}
    },
    computed: {
      // router () {
      //   return this.$router.options.routes
      // }
    },
    watch: {},
    methods: {},
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .asideBarItem-container {
  }
</style>