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 首页

appMain.vue  右侧路由跳转视图

asideBar.vue  左侧导航栏

asideBarItem.vue  递归左侧子导航