動態加載router，用Vue+Element UI搭建後臺管理系統界面

兩個一級菜單，每個一級菜單下對應兩個頁面，在 router.js 添加代碼如下所示。

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
import PageOne from '@/components/PageOne'
import PageTwo from '@/components/PageTwo'
import PageThree from '@/components/PageThree'
import PageFour from '@/components/PageFour'
Vue.use(Router)
export default new Router({
 mode: 'history',
 routes: [
 {
 path: '/',
 name: '導航1',
 component: Main,
 children:[
 {
 path: '/pageone',
 name: '頁面1',
 component: PageOne
 },
 {
 path: '/pagetwo',
 name: '頁面2',
 component: PageTwo
 }
 ]
 },
 {
 path: '/navigation',
 name: '導航2',
 component: Main,
 children:[
 {
 path: '/pagethree',
 name: '頁面3',
 component: PageThree
 },
 {
 path: '/pagefour',
 name: '頁面4', 

 component: PageFour
 }
 ]
 }
 ]
})

其中 Main 是主頁面，PageOne、PageTwo 為導航1下屬頁面，PageThree、PageFour 為導航2下屬頁面，結構很清晰，一目瞭然。

接下來在 Main.vue 中動態解析 router，生成菜單，代碼如下所示。

<template>
 <el-container>
 <el-aside>
 <el-menu>
 <el-submenu>
 <template>{{item.name}}/<template>
 <el-menu-item>{{item2.name}}/<el-menu-item>
 /<el-submenu>
 /<el-menu>
 /<el-aside>
 /<el-container>
/<template>

通過 v-for 循環遍歷 routes，動態生成 <el-submenu> 標籤，此為一級菜單，在內部繼續用 v-for 循環遍歷其 children，動態生成 <el-menu-item> 標籤，是二級菜單，給每個標籤設置不同的 index 值，否則會導致點擊事件錯亂，實際運行結果如下圖所示。/<el-menu-item>/<el-submenu>

菜單創建成功，接下來完成頁面與菜單選項的綁定。

1、<el-menu> 標籤添加 router 屬性。/<el-menu>

2、在頁面添加 <router-view> 標籤，它是一個容器，渲染的組件是你當前要跳轉的 router。/<router-view>

3、<el-menu-item> 標籤的 index 值就是要跳轉的頁面路徑。/<el-menu-item>

根據以上 3 條，修改 Main.vue 代碼如下所示。

<template>
 <el-container>
 <el-aside>
 <el-menu>
 <el-submenu>
 <template>{{item.name}}/<template>
 <el-menu-item>{{item2.name}}/<el-menu-item>
 /<el-submenu>
 /<el-menu>
 /<el-aside>
 <el-main>
 <el-breadcrumb>
 <el-breadcrumb-item>首頁/<el-breadcrumb-item>
 <el-breadcrumb-item>
 /<el-breadcrumb>
 <router-view>
 /<el-main>
 /<el-container>
/<template>

這樣就實現了頁面跳轉，運行結果如下圖所示。

最後一個問題，當我們第一次訪問主頁面時，右側的子頁面為空，如下圖所示。

我們希望默認加載導航1的頁面1，如何實現呢？非常簡單，給主頁面設置重定向即可，修改主頁面 router 如下所示。

{
 path: '/',
 name: '導航1',
 component: Main,
 redirect: '/pageone',
 children:[
 {
 path: '/pageone',
 name: '頁面1',
 component: PageOne
 },
 {
 path: '/pagetwo',
 name: '頁面2',
 component: PageTwo
 }
 ]
}

添加了 redirect: '/pageone'，即加載主頁面之後會自動跳轉到 /pageone，接下來設置導航1中的頁面1選項默認選中，具體實現是在循環中判斷系統的 router 是否等於當前頁面的 router，成立則設置 class="is-active"，如下所示。

<el-menu-item> :class="$route.path==item2.path?'is-active':''">{{item2.name}}/<el-menu-item>

再次訪問 http://localhost:8080，結果如下圖所示。

以上就是用 Vue + Element UI 動態搭建後臺管理系統界面的步驟，你學會了嗎？

關注微信公眾號「Java大聯盟」，關注即可獲取海量學習乾貨，同時還有不定期送書，鍵盤，鼠標等粉絲福利。

趕快來關注一波，海量資源拿到手軟。