項(xiàng)目中基于vue-element-admin的多級(jí)路由配置，這里做一下記錄

介紹

vue-element-admin 是一個(gè)后臺(tái)前端解決方案，它基于 vue 和 element-ui實(shí)現(xiàn)。它使用了最新的前端技術(shù)棧，內(nèi)置了 i18 國(guó)際化解決方案，動(dòng)態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，它可以幫助你快速搭建企業(yè)級(jí)中后臺(tái)產(chǎn)品原型。

鏈接地址： vue-element-admin

需求場(chǎng)景

二級(jí)路由無(wú)法完整且正確表達(dá)項(xiàng)目中所展示的內(nèi)容信息，需要對(duì)信息進(jìn)行進(jìn)一步細(xì)化，使層次顯示的更加清晰明了

image.png

目錄結(jié)構(gòu)

由于項(xiàng)目隱私，路由和組件的代碼還是用官方例子作為參考，基本都是大同小異

• 路由結(jié)構(gòu)
  路由這塊可以寫一個(gè)modules文件夾，用于存放二級(jí)及以上的路由模塊
  
  image.png
  
  三級(jí)路由結(jié)構(gòu) 官方例子
  這里寫了一個(gè)nested 的三級(jí)路由結(jié)構(gòu)，基于Layout 布局模塊，添加了三個(gè)children

//  nested.js

/** When your routing table is too long, you can split it into small modules **/

import Layout from '@/layout'

const nestedRouter = {
  path: '/nested',
  component: Layout,
  redirect: '/nested/menu1/menu1-1',
  name: 'Nested',
  meta: {
    title: 'Nested Routes',
    icon: 'nested'
  },
  children: [
    {
      path: 'menu1',
      component: () => import('@/views/nested/menu1/index'), // Parent router-view
      name: 'Menu1',
      meta: { title: 'Menu 1' },
      redirect: '/nested/menu1/menu1-1',
      children: [
        {
          path: 'menu1-1',
          component: () => import('@/views/nested/menu1/menu1-1'),
          name: 'Menu1-1',
          meta: { title: 'Menu 1-1' }
        },
        {
          path: 'menu1-2',
          component: () => import('@/views/nested/menu1/menu1-2'),
          name: 'Menu1-2',
          redirect: '/nested/menu1/menu1-2/menu1-2-1',
          meta: { title: 'Menu 1-2' },
          children: [
            {
              path: 'menu1-2-1',
              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
              name: 'Menu1-2-1',
              meta: { title: 'Menu 1-2-1' }
            },
            {
              path: 'menu1-2-2',
              component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
              name: 'Menu1-2-2',
              meta: { title: 'Menu 1-2-2' }
            }
          ]
        },
        {
          path: 'menu1-3',
          component: () => import('@/views/nested/menu1/menu1-3'),
          name: 'Menu1-3',
          meta: { title: 'Menu 1-3' }
        }
      ]
    },
    {
      path: 'menu2',
      name: 'Menu2',
      component: () => import('@/views/nested/menu2/index'),
      meta: { title: 'Menu 2' }
    }
  ]
}

export default nestedRouter

然后將其導(dǎo)出，在routes.js里面導(dǎo)入，放到想要放的位置（頁(yè)面的層次結(jié)構(gòu)根據(jù)路由的順序依次渲染）

// routes.js

import nestedRouter from './modules/nested'
...
/** when your routing map is too long, you can split it into small modules **/
nestedRouter
...

• 組件結(jié)構(gòu)
  組件的存放位置也要按照多級(jí)路由的嵌套規(guī)則來建文件夾
  這里還是拿官方例子來看， 最外層是nested然后里面放了兩個(gè)文件夾menu1 和 menu2
  全部展開結(jié)果如下圖
  
  image.png
  
  這里一級(jí)菜單menu1下面還有幾個(gè)二級(jí)菜單menu1-1 、menu1-2和menu1-3，所以在menu1下面新建一個(gè)index.vue， 在里面加上<router-view>

image.png

<template>
  <div style="padding:30px;">
    <el-alert :closable="false" title="menu 1">
      <!-- 原則上有多少級(jí)路由嵌套就需要多少個(gè)<router-view> -->
      <router-view />
    </el-alert>
  </div>
</template>

按照官方的解釋，原則上有多少級(jí)路由嵌套就需要多少個(gè)<router-view>
所以當(dāng)二級(jí)菜單menu1-2下面還有幾個(gè)三級(jí)菜單menu1-2-1和menu1-2-2時(shí)，這時(shí)候就需要在menu1-2的index.vue里面再添加<router-view>

<template>
  <div style="padding:30px;">
    <el-alert :closable="false" title="menu 1-2" type="success">
      <!-- 原則上有多少級(jí)路由嵌套就需要多少個(gè)<router-view> -->
      <router-view />
    </el-alert>
  </div>
</template>

然后自己的項(xiàng)目按照這種方式配置，就能實(shí)現(xiàn)多級(jí)目錄（嵌套路由）了。

jiesen_s.jpg