SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（六）：使用 vue-router 進行動態加載菜單

前提：

（1） 相關博文地址：

SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（一）：搭建基本環境：https://www.cnblogs.com/l-y-h/p/12930895.html
SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（二）：引入 element-ui 定義基本頁面顯示：https://www.cnblogs.com/l-y-h/p/12935300.html
SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（三）：引入 js-cookie、axios、mock 封裝請求處理以及返回結果：https://www.cnblogs.com/l-y-h/p/12955001.html
SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（四）：引入 vuex 進行狀態管理、引入 vue-i18n 進行國際化管理：https://www.cnblogs.com/l-y-h/p/12963576.html
SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（五）：引入 vue-router 進行路由管理、模塊化封裝 axios 請求、使用 iframe 標籤嵌套頁面：https://www.cnblogs.com/l-y-h/p/12973364.html

（2）代碼地址：

https://github.com/lyh-man/admin-vue-template.git

 

1、獲取動態菜單數據

一、介紹

（1）爲何使用動態加載菜單？
　　在以前的 router 中，菜單的顯示都是寫死的。
　　而實際業務需求中，可能須要動態的從後臺獲取菜單數據並顯示，這就須要動態加載菜單了。
好比:
　　須要根據用戶權限，去展示不一樣的菜單選項。

（2）項目中如何使用？
　　項目中使用時，各個 vue 組件事先定義好，並存放在固定位置。
　　用戶登陸成功後，根據後臺返回的菜單數據，動態拼接路由信息，並顯示相應的菜單項（不一樣權限用戶顯示不一樣菜單）。
　　點擊菜單項，會鏈接到相應的 vue 組件，跳轉路由並顯示。

二、使用 mock 模擬返回 動態菜單數據

（1）Step1：
　　封裝一個 菜單請求模塊，並引入。
　　以前博客中已介紹使用了 模塊化封裝 axios 請求，這裏新建一個 menu.js 用來處理菜單相關的請求。

import http from '@/http/httpRequest.js'

export function getMenus() {
    return http({
        url: '/menu/getMenus',
        method: 'get'
    })
}

 

 

 引入 封裝好的模塊。

 

 

 

（2）Step2：
　　使用 mock 模擬菜單數據。
　　封裝一個 menu.js 並引入。

import Mock from 'mockjs'

// 登陸
export function getMenus() {
    return {
        // isOpen: false,
        url: 'api/menu/getMenus',
        type: 'get',
        data: {
            'code': 200,
            'msg': 'success',
            'data': menuList
        }
    }
}

/*
    menuId       表示當前菜單項 ID
    parentId     表示父菜單項 ID
    name_zh      表示菜單名（中文）
    name_en      表示菜單名（英語）
    url          表示路由跳轉路徑（自身模塊 或者 外部 url）
    type         表示當前菜單項的級別（0: 目錄，1: 菜單項，2: 按鈕）
    icon         表示當前菜單項的圖標
    orderNum     表示當前菜單項的順序
    subMenuList  表示當前菜單項的子菜單
*/
var menuList = [{
        'menuId': 1,
        'parentId': 0,
        'name_zh': '系統管理',
        'name_en': 'System Control',
        'url': '',
        'type': 0,
        'icon': 'el-icon-setting',
        'orderNum': 0,
        'subMenuList': [{
                'menuId': 2,
                'parentId': 1,
                'name_zh': '管理員列表',
                'name_en': 'Administrator List',
                'url': 'sys/UserList',
                'type': 1,
                'icon': 'el-icon-user',
                'orderNum': 1,
                'subMenuList': []
            },
            {
                'menuId': 3,
                'parentId': 1,
                'name_zh': '角色管理',
                'name_en': 'Role Control',
                'url': 'sys/RoleControl',
                'type': 1,
                'icon': 'el-icon-price-tag',
                'orderNum': 2,
                'subMenuList': []
            },
            {
                'menuId': 4,
                'parentId': 1,
                'name_zh': '菜單管理',
                'name_en': 'Menu Control',
                'url': 'sys/MenuControl',
                'type': 1,
                'icon': 'el-icon-menu',
                'orderNum': 3,
                'subMenuList': []
            }
        ]
    },
    {
        'menuId': 5,
        'parentId': 0,
        'name_zh': '幫助',
        'name_en': 'Help',
        'url': '',
        'type': 0,
        'icon': 'el-icon-info',
        'orderNum': 1,
        'subMenuList': [{
            'menuId': 6,
            'parentId': 5,
            'name_zh': '百度',
            'name_en': 'Baidu',
            'url': 'https://www.baidu.com/',
            'type': 1,
            'icon': 'el-icon-menu',
            'orderNum': 1,
            'subMenuList': []
        }, {
            'menuId': 7,
            'parentId': 5,
            'name_zh': '博客',
            'name_en': 'Blog',
            'url': 'https://www.cnblogs.com/l-y-h/',
            'type': 1,
            'icon': 'el-icon-menu',
            'orderNum': 1,
            'subMenuList': []
        }]
    }
]

 

 在 index.js 中聲明，並開啓 mock 攔截。

import * as menu from './modules/menu.js'
fnCreate(menu, true)

 

 

（3）使用
　　使用時，經過以下代碼能夠訪問到 mock。
　　this.$http 是封裝的 axios 請求（詳情可見：https://www.cnblogs.com/l-y-h/p/12973364.html）

// 獲取動態菜單
this.$http.menu.getMenus().then(response => {
    console.log(response)
})

 

（4）簡單測試一下
　　在 Login.vue 的登陸方法中，簡單測試一下。

dataFormSubmit() {
    this.$http.login.getToken().then(response => {
        // 獲取動態菜單
        this.$http.menu.getMenus().then(response => {
            console.log(response)
        })
        this.$message({
            message: this.$t("login.signInSuccess"),
            type: 'success'
        })
        // 保存 token
        setToken(response.data.token)
        this.updateName(this.dataForm.userName)
        console.log(response)
        this.$router.push({
            name: 'Home'
        })
    })
}

 

 

 

（5）測試結果

 

 

 

三、動態菜單數據國際化問題

（1）問題
　　動態菜單數據國際化問題，數據都是保存在數據庫中，中文系統下返回英文數據、或者 英文系統下返回中文數據，感受都有些彆扭，因此須要進行國際化處理，某語言系統返回該語言的數據。

（2）解決
思路一：
　　從數據庫下手，給表維護字段，好比：name-zh、name-en，使用時，根據語言選擇對應的字段顯示便可。修改時修改語言對應的字段便可，簡單明瞭。
　　固然這個缺點也很明顯，增長了額外的字段，若是還有其餘語言，那麼會增長不少額外的字段。

思路二：
　　也從數據庫下手，額外增長一個語言數據表，裏面維護了各類語言下對應的數據。使用時，從這張表查對應的數據便可。修改時也只要修改這張表對應的字段便可。
　　缺點也有，畢竟多維護了一張數據表。

思路三：
　　數據庫不作國際化處理，由前端或者後端去作，數據庫維護的是 國際化的變量名。即從數據庫取出數據後，根據該數據返回國際化數據。
　　缺點嘛，國際化數據都寫死了，沒法直接修改。須要修改國際化的配置文件。

（3）項目中使用
　　在這個項目中，我採用第一種方式，此項目就是一個練手的項目，國際化也就 中英文切換，增長一個額外的字段影響不大。因此 上面 mock 數據中，我使用了 name_zh 表示中文、name_en 表示英語。
　　固然，有更好的方式，還望你們不吝賜教。

 

四、修改 router 獲取動態菜單數據

（1）思路：
Step1：首先肯定獲取動態菜單數據的時機。
　　通常在登陸成功跳轉到主頁面時，獲取動態菜單數據。
　　因爲涉及到路由的跳轉（登陸頁面 -> 主頁面），因此可使用 beforeEach 進行路由守衛操做。
　　但因爲每次路由跳轉均會觸發 beforeEach ，因此爲了防止頻繁獲取動態路由值，可使用一個全局的布爾型變量去控制，好比 false 表示未獲取動態路由，獲取動態路由後，將其置爲 true，每次路由跳轉時，判斷該值是否爲 true，爲 false 就從新獲取動態菜單數據並處理。

Step2：其次，處理動態菜單數據，將其變化成 route 的形式。
　　route 格式通常以下：
其中：
　　path：指路由路徑（能夠根據路徑定位路由）。
　　name：指路由名（能夠根據路由名定位路由）。
　　component：指路由所在的組件。
　　children：指的是路由組件中嵌套的子路由。
　　meta：用於定義路由的一些元信息。

route = {
    path: '',
    name: '',
    component: null,
    children: [],
    meta: {}
}

簡單舉例：
　　以下菜單數據轉換成 route：
　　　　url 能夠轉換爲 path、name，用於定位路由。
　　　　url 也用於定位 component 組件。
　　　　subMenuList 能夠轉換爲 children，用於設置子路由（固然子路由也進行一樣處理）。
　　　　其他的屬性，能夠放在 meta 中。

【動態菜單數據：】
[{
        'menuId': 1,
        'parentId': 0,
        'name_zh': '系統管理',
        'name_en': 'System Control',
        'url': '',
        'type': 0,
        'icon': 'el-icon-setting',
        'orderNum': 0,
        'subMenuList': [{
                'menuId': 2,
                'parentId': 1,
                'name_zh': '管理員列表',
                'name_en': 'Administrator List',
                'url': 'sys/UserList',
                'type': 1,
                'icon': 'el-icon-user',
                'orderNum': 1,
                'subMenuList': []
            }
        ]
    }
]

【轉換後：】
[
    path: '',
    name: '',
    componment: null,
    children: [{
        path: 'sys-UserList',
        name: 'sys-UserList',
        componment: () => import(/sys/UserList.vue),
        meta: {
            'menuId': 2,
            'parentId': 1,
            'type': 1,
            'icon': 'el-icon-user',
            'orderNum': 1,
            'name_zh': '管理員列表',
            'name_en': 'Administrator List',
        }
    ]],
    meta: {
        'menuId': 1,
        'parentId': 0,
        'type': 0,
        'icon': 'el-icon-setting',
        'orderNum': 0,
        'name_zh': '系統管理',
        'name_en': 'System Control',
    }
]

 

Step3：使用 addRoute 方法，添加動態路由到主路由上。
　　對於轉換好的路由數據（route），可使用 addRoute 將其添加到主路由上。
注（有個小坑，簡單說明一下，後續會演示）：
　　此處若直接使用 addRoute 添加路由，經過 路由實例的 options 方法會沒法看到新添加的路由信息，也即沒法經過 路由實例去獲取動態添加的路由數據。
　　若想看到新添加的路由信息，能夠指定一個路由實例上的路由，並在其 children 中綁定動態路由，而後經過 addRoute 添加該路由，數據纔會被顯示。

 

（2）代碼實現 -- 獲取動態菜單數據：
Step1：肯定獲取動態菜單數據的時機。
　　時機：通常在登陸成功並進入主頁面時，獲取動態菜單並顯示。
　　因爲涉及到路由跳轉（登陸頁面 -> 主頁面），因此可使用 beforeEach 定義一個全局守衛，當從登陸頁面跳轉到主頁面時能夠觸發獲取數據的操做。
　　固然，有其餘方式觸發獲取數據的操做亦可。

Step2：定義一個全局變量，用於控制是否獲取過動態菜單數據。
　　因爲在 beforeEach 內部定義路由，每次路由跳轉均會觸發此操做，爲了防止頻繁獲取動態菜單，能夠定義一個全局布爾變量來控制是否已經獲取過動態菜單。
　　能夠在 router 實例中 添加一個變量用於控制（isAddDynamicMenuRoutes）。
　　經過 router.options.isAddDynamicMenuRoutes 能夠獲取、修改該值。

// 建立一個 router 實例
const router = new VueRouter({
    // routes 用於定義 路由跳轉 規則
    routes,
    // mode 用於去除地址中的 #
    mode: 'history',
    // scrollBehavior 用於定義路由切換時，頁面滾動。
    scrollBehavior: () => ({
        y: 0
    }),
    // isAddDynamicMenuRoutes 表示是否已經添加過動態菜單（防止頻繁請求動態菜單）
    isAddDynamicMenuRoutes: false
})

 

Step3：獲取動態數據。
　　因爲以前對主頁面的路由跳轉，已經定義過一個 beforeEach，用於驗證 token 是否存在。
　　從登陸頁面跳轉到主頁面會觸發該 beforeEach，且登陸後存在 token，因此能夠直接複用。

import http from '@/http/http.js'

router.beforeEach((to, from, next) => {
    // 當開啓導航守衛時，驗證 token 是否存在。
    // to.meta.isRouter 表示是否開啓動態路由
    if (to.meta.isRouter) {
        // console.log(router)
        // 獲取 token 值
        let token = getToken()
        // token 不存在時，跳轉到 登陸頁面
        if (!token || !/\S/.test(token)) {
            next({
                name: 'Login'
            })
        }
        // token 存在時，判斷是否已經獲取過 動態菜單，未獲取，即 false 時，須要獲取
        if (!router.options.isAddDynamicMenuRoutes) {
                http.menu.getMenus().then(response => {
                    console.log(response)
                })
        }
    }
}

 

固然，須要對代碼的邏輯進行一些修改（填坑記錄 =_= ）。

填坑：
　　頁面刷新時，動態路由跳轉不正確。
　　以前爲了驗證 token，增長了一個 isRouter 屬性值，用於給指定路由增長判斷 token 的邏輯。
　　對於動態路由，頁面刷新後，路由會從新建立，即此時動態路由並不存在，也即 isRouter 不存在，從而 if 中的邏輯並不會觸發，動態路由並不會被建立，從而頁面跳轉失敗。
　　因此在 if 判斷中，增長了一個條件 isDynamicRoutes，用於判斷是否爲動態路由，由於動態路由只存在於主頁面中，因此其與 isRouter 的做用（爲主頁面增長 token 驗證邏輯）不矛盾。

　　isDynamicRoutes 能夠寫在公用的 validate.js 中。使用時須要將其引入。
　　因爲此項目動態路由路徑中均包含 DynamicRoutes，因此以此進行正則表達式判斷。

/**
 * 判斷是否爲 動態路由
 * @param {*} s
 */
export function isDynamicRoutes(s) {
    return /DynamicRoutes/.test(s)
}

 

 

import { isDynamicRoutes } from '@/utils/validate.js'

// 添加全局路由導航守衛
router.beforeEach((to, from, next) => {
    // 當開啓導航守衛時，驗證 token 是否存在。
    // to.meta.isRouter 表示是否開啓動態路由
    // isDynamicRoutes 判斷該路由是否爲動態路由（頁面刷新時，動態路由沒有 isRouter 值，此時 to.meta.isRouter 條件不成立，即動態路由拼接邏輯不能執行）
    if (to.meta.isRouter || isDynamicRoutes(to.path)) {
        // 獲取 token 值
        let token = getToken()
        // token 不存在時，跳轉到 登陸頁面
        if (!token || !/\S/.test(token)) {
            next({
                name: 'Login'
            })
        }
        // token 存在時，判斷是否已經獲取過 動態菜單，未獲取，即 false 時，須要獲取
        if (!router.options.isAddDynamicMenuRoutes) {
                http.menu.getMenus().then(response => {
                    console.log(response)
                })
        }
    }
}

 

（3）代碼實現 -- 處理動態菜單數據
Step1：
　　設置全局布爾變量爲 true，上面已經定義了一個 isAddDynamicMenuRoutes 變量，當獲取動態菜單成功後，將其值置爲 true（表示獲取動態菜單成功），用於防止頻繁獲取菜單。
　　而後，再去處理動態菜單數據，此處將處理邏輯抽成一個方法 fnAddDynamicMenuRoutes。

import { isDynamicRoutes } from '

// 添加全局路由導航守衛
router.beforeEach((to, from, next) => {
    // 當開啓導航守衛時，驗證 token 是否存在。
    // to.meta.isRouter 表示是否開啓動態路由
    // isDynamicRoutes 判斷該路由是否爲動態路由（頁面刷新時，動態路由沒有 isRouter 值，此時 to.meta.isRouter 條件不成立，即動態路由拼接邏輯不能執行）
    if (to.meta.isRouter || isDynamicRoutes(to.path)) {
        // 獲取 token 值
        let token = getToken()
        // token 不存在時，跳轉到 登陸頁面
        if (!token || !/\S/.test(token)) {
            next({
                name: 'Login'
            })
        }
        // token 存在時，判斷是否已經獲取過 動態菜單，未獲取，即 false 時，須要獲取
        if (!router.options.isAddDynamicMenuRoutes) {
                http.menu.getMenus().then(response => {
                    // 數據返回成功時
                if (response && response.data.code === 200) {
                    // 設置動態菜單爲 true，表示不用再次獲取
                    router.options.isAddDynamicMenuRoutes = true
                    // 獲取動態菜單數據
                    let results = fnAddDynamicMenuRoutes(response.data.data)
                    console.log(results)
                }
                })
        }
    }
}

 

Step2：
　　fnAddDynamicMenuRoutes 用於遞歸菜單數據。
　　getRoute 用於返回某個數據轉換的 路由格式。
下面註釋寫的應該算是很詳細了，主要講一下思路：
　　對數據進行遍歷，
　　定義兩個數組（temp，route），temp 用於保存沒有子路由的路由，route 用於保存存在子路由的路由。
　　若是某個數據存在 子路由，則對子路由進行遍歷，並將其返回結果做爲當前數據的 children。並使用 route 保存路由。
　　若是某個數據不存在子路由，則直接使用 temp 保存路由。
　　最後，返回二者拼接的結果，即爲轉換後的數據。

// 用於處理動態菜單數據，將其轉爲 route 形式
function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
    // 用於保存普通路由數據
    let temp = []
    // 用於保存存在子路由的路由數據
    let route = []
    // 遍歷數據
    for (let i = 0; i < menuList.length; i++) {
        // 存在子路由，則遞歸遍歷，並返回數據做爲 children 保存
        if (menuList[i].subMenuList && menuList[i].subMenuList.length > 0) {
            // 獲取路由的基本格式
            route = getRoute(menuList[i])
            // 遞歸處理子路由數據，並返回，將其做爲路由的 children 保存
            route.children = fnAddDynamicMenuRoutes(menuList[i].subMenuList)
            // 保存存在子路由的路由
            routes.push(route)
        } else {
            // 保存普通路由
            temp.push(getRoute(menuList[i]))
        }
    }
    // 返回路由結果
    return routes.concat(temp)
}

// 返回路由的基本格式
function getRoute(item) {
    // 路由基本格式
    let route = {
        // 路由的路徑
        path: '',
        // 路由名
        name: '',
        // 路由所在組件
        component: null,
        meta: {
            // 開啓路由守衛標誌
            isRouter: true,
            // 開啓標籤頁顯示標誌
            isTab: true,
            // iframe 標籤指向的地址（數據以 http 或者 https 開頭時，使用 iframe 標籤顯示）
            iframeUrl: '',
            // 開啓動態路由標誌
            isDynamic: true,
            // 動態菜單名稱（nameZH 顯示中文， nameEN 顯示英文）
            name_zh: item.name_zh,
            name_en: item.name_en,
            // 動態菜單項的圖標
            icon: item.icon,
            // 菜單項的 ID
            menuId: item.menuId,
            // 菜單項的父菜單 ID
            parentId: item.parentId,
            // 菜單項排序依據
            orderNum: item.orderNum,
            // 菜單項類型（0: 目錄，1: 菜單項，2: 按鈕）
            type: item.type
        },
        // 路由的子路由
        children: []
    }
    // 若是存在 url，則根據 url 進行相關處理（判斷是 iframe 類型仍是 普通類型）
    if (item.url && /\S/.test(item.url)) {
        // 若 url 有前綴 /，則將其去除，方便後續操做。
        item.url = item.url.replace(/^\//, '')
        // 定義基本路由規則，將 / 使用 - 代替
        route.path = item.url.replace('/', '-')
        route.name = item.url.replace('/', '-')
        // 若是是 外部 url，使用 iframe 標籤展現，不用指定 component，從新指定 path、name 以及 iframeUrl。
        if (isURL(item.url)) {
            route['path'] = `iframe-${item.menuId}`
            route['name'] = `iframe-${item.menuId}`
            route['meta']['iframeUrl'] = item.url
        } else {
            // 若是是項目模塊，使用 route-view 標籤展現，須要指定 component(加載指定目錄下的 vue 組件)
            route.component = () => import(`@/views/dynamic/${item.url}.vue`) || null
        }
    }
    // 返回 route
    return route
}

能夠查看當前輸出結果：

 

 

 

[
    {
        "path": "",
        "name": "",
        "component": null,
        "meta": {
            "isRouter": true,
            "isTab": true,
            "iframeUrl": "",
            "isDynamic": true,
            "name_zh": "系統管理",
            "name_en": "System Control",
            "icon": "el-icon-setting",
            "menuId": 1,
            "parentId": 0,
            "orderNum": 0,
            "type": 0
        },
        "children": [
            {
                "path": "sys-UserList",
                "name": "sys-UserList",
                "meta": {
                    "isRouter": true,
                    "isTab": true,
                    "iframeUrl": "",
                    "isDynamic": true,
                    "name_zh": "管理員列表",
                    "name_en": "Administrator List",
                    "icon": "el-icon-user",
                    "menuId": 2,
                    "parentId": 1,
                    "orderNum": 1,
                    "type": 1
                },
                "children": []
            },
            {
                "path": "sys-RoleControl",
                "name": "sys-RoleControl",
                "meta": {
                    "isRouter": true,
                    "isTab": true,
                    "iframeUrl": "",
                    "isDynamic": true,
                    "name_zh": "角色管理",
                    "name_en": "Role Control",
                    "icon": "el-icon-price-tag",
                    "menuId": 3,
                    "parentId": 1,
                    "orderNum": 2,
                    "type": 1
                },
                "children": []
            },
            {
                "path": "sys-MenuControl",
                "name": "sys-MenuControl",
                "meta": {
                    "isRouter": true,
                    "isTab": true,
                    "iframeUrl": "",
                    "isDynamic": true,
                    "name_zh": "菜單管理",
                    "name_en": "Menu Control",
                    "icon": "el-icon-menu",
                    "menuId": 4,
                    "parentId": 1,
                    "orderNum": 3,
                    "type": 1
                },
                "children": []
            }
        ]
    },
    {
        "path": "",
        "name": "",
        "component": null,
        "meta": {
            "isRouter": true,
            "isTab": true,
            "iframeUrl": "",
            "isDynamic": true,
            "name_zh": "幫助",
            "name_en": "Help",
            "icon": "el-icon-info",
            "menuId": 5,
            "parentId": 0,
            "orderNum": 1,
            "type": 0
        },
        "children": [
            {
                "path": "iframe-6",
                "name": "iframe-6",
                "component": null,
                "meta": {
                    "isRouter": true,
                    "isTab": true,
                    "iframeUrl": "https://www.baidu.com/",
                    "isDynamic": true,
                    "name_zh": "百度",
                    "name_en": "Baidu",
                    "icon": "el-icon-menu",
                    "menuId": 6,
                    "parentId": 5,
                    "orderNum": 1,
                    "type": 1
                },
                "children": []
            },
            {
                "path": "iframe-7",
                "name": "iframe-7",
                "component": null,
                "meta": {
                    "isRouter": true,
                    "isTab": true,
                    "iframeUrl": "https://www.cnblogs.com/l-y-h/",
                    "isDynamic": true,
                    "name_zh": "博客",
                    "name_en": "Blog",
                    "icon": "el-icon-menu",
                    "menuId": 7,
                    "parentId": 5,
                    "orderNum": 1,
                    "type": 1
                },
                "children": []
            }
        ]
    }
]

 

五、使用 addRoute 添加路由：

　　經過上面的步驟，已經獲取到動態菜單數據，並將其轉爲路由的格式。
　　如今只須要使用 addRoute 將其添加到路由上，便可使用該動態路由。
有個小坑，下面有演示以及解決方法。

 

（1）添加三個基本組件頁面，用於測試。
　　基本組件頁面的位置，要與上面 component 指定的位置相一致。

【MenuControl.vue】
<template>
    <div>
        <h1>Menu Control</h1>
    </div>
</template>

<script>
</script>

<style>
</style>

【RoleControl.vue】
<template>
    <div>
        <h1>Role Control</h1>
    </div>
</template>

<script>
</script>

<style>
</style>

【UserList.vue】
<template>
    <div>
        <h1>User List</h1>
    </div>
</template>

<script>
</script>

<style>
</style>

 

 

 

（2）使用 addRoute 添加路由 -- 基本版
　　根據項目需求，自行處理相關顯示邏輯（此處只是最簡單的版本）。
　　因爲此處的菜單顯示，只是二級菜單。且菜單內容，均顯示在 Home.vue 組件中，因此最終路由的格式應該以下所示，全部的路由均顯示在 children 中。

{
    path: '/DynamicRoutes',
    name: 'DynamicHome',
    component: () => import('@/views/Home.vue'),
    children: [{
     }]
}

 

想要實現這個效果，得對轉換後的動態數據進行進一步的處理。對於第一層菜單數據，須要指定相應的組件，此處爲 Home.vue。

// 獲取動態菜單數據
let results = fnAddDynamicMenuRoutes(response.data.data)
// 若是動態菜單數據存在，對其進行處理
if (results && results.length > 0) {
    // 遍歷第一層數據
    results.map(value => {
        // 若是 path 值不存在，則對其賦值，並指定 component 爲 Home.vue
        if (!value.path) {
            value.path = `/DynamicRoutes-${value.meta.menuId}`
            value.name = `DynamicHome-${value.meta.menuId}`
            value.component = () => import('@/views/Home.vue')
        }
    })
}
console.log(results)

 

 

 

能夠看到路由信息都已完善，此時，便可使用 addRoute 方法添加路由。

// 使用 router 實例的 addRoutes 方法，給當前 router 實例添加一個動態路由
router.addRoutes(results)
// 查看當前路由信息
console.log(router.options)
// 測試一下路由是否能正常跳轉，能跳轉，則顯示路由添加成功
setTimeout(()=> {
    router.push({name : "sys-UserList"})
}, 3000)

 

 

 

　　如上圖所示，動態路由添加成功，且可以成功跳轉。
　　可是有一個問題，如何獲取到動態路由的值呢？

　　通常經過 router 實例對象的 options 方法能夠查看到當前路由的信息。（使用 router.options 或者 this.$router.options 能夠查看）。

　　可是從上圖能夠看到，動態添加的數據並無在 options 中顯示出來，但路由確實添加成功了。沒有看源代碼，因此不太清除裏面的實現邏輯（有人知道的話，還望不吝賜教）。谷歌搜索了一下，沒有找到滿意的答案，基本都是說如何在 options 中顯示路由信息（=_=），因此此處省略原理，之後有機會再補充，此處直接上解決辦法。

 

獲取動態路由值通常有兩種方式。
　　第一種：經過 router 實例對象的 options 方式。
　　　　動態路由使用靜態路由的 children 展開，即事先定義好靜態路由，添加動態路由時，將該動態路由添加到靜態路由 children 上，便可經過 options 顯示。　

　　第二種：經過 vuex 方式。
　　　　經過 vuex 保存當前動態路由的信息。即單獨保存一份動態路由的信息，使用時從 vuex 中獲取便可。固然，使用 localStorage、sessionStorage 保存亦可。

 

（3）獲取動態路由值 -- 方式一
　　經過靜態路由的 children 的形式，添加動態路由信息。
Step1:
　　定義一個靜態路由，固然，router 實例對象中的 routes 也須要修改。

// 用於保存動態路由
const dynamicRoutes = [{
    path: '/DynamicRoutes',
    component: () => import('@/views/Home.vue'),
    children: []
}]

// 建立一個 router 實例
const router = new VueRouter({
    // routes 用於定義 路由跳轉 規則
    routes: dynamicRoutes.concat(routes),
    // routes,
    // mode 用於去除地址中的 #
    mode: 'history',
    // scrollBehavior 用於定義路由切換時，頁面滾動。
    scrollBehavior: () => ({
        y: 0
    }),
    // isAddDynamicMenuRoutes 表示是否已經添加過動態菜單（防止頻繁請求動態菜單）
    isAddDynamicMenuRoutes: false
})

 

Step2：
　　修改 addRoutes 規則。
　　首先須要將 動態路由添加到 靜態路由的 children 方法中。
　　而後使用 addRoutes 添加靜態路由。

// 若是動態菜單數據存在，對其進行處理
if (results && results.length > 0) {
    // 遍歷第一層數據
    results.map(value => {
        // 若是 path 值不存在，則對其賦值，並指定 component 爲 Home.vue
        if (!value.path) {
            value.path = `/DynamicRoutes-${value.meta.menuId}`
            value.name = `DynamicHome-${value.meta.menuId}`
            value.component = () => import('@/views/Home.vue')
        }
    })
}
// 將動態路由信息添加到靜態路由的 children 中
dynamicRoutes[0].children = results
dynamicRoutes[0].name = 'DynamicRoutes'
// 使用 router 實例的 addRoutes 方法，給當前 router 實例添加一個動態路由
router.addRoutes(dynamicRoutes)
// 查看當前路由信息
console.log(router.options)
// 測試一下路由是否能正常跳轉，能跳轉，則顯示路由添加成功
router.push({name : "sys-UserList"})

 

 

 

　　經過上圖，能夠看到，使用 addRoutes 添加數據到靜態路由的 children 後，可使用 router 實例對象的 options 查看到相應的動態數據。

　　可是仍是出現了一些小問題，因爲靜態路由指定了 Home.vue 組件，因此其 children 不該該再出現 Home.vue 組件，不然出現了會出現上圖那樣的狀況（Home.vue 組件中套 Home.vue 組件）。

 

　　感受沒有什麼好的解決辦法，只能粗暴的捨棄一些數據。
　　好比舍棄第一層的數據，將其他數據拼接成一個數組，而後添加到靜態路由的 children 上。

// 保存動態菜單數據
let temp = []
// 若是動態菜單數據存在，對其進行處理
if (results && results.length > 0) {
    // 捨棄第一層數據
    results.map(value => {
        if (!value.path) {
            temp = temp.concat(value.children)
        }
    })
}
// 將動態路由信息添加到靜態路由的 children 中
dynamicRoutes[0].children = temp
dynamicRoutes[0].name = 'DynamicRoutes'
// 使用 router 實例的 addRoutes 方法，給當前 router 實例添加一個動態路由
router.addRoutes(dynamicRoutes)
// 查看當前路由信息
console.log(router.options)
// 測試一下路由是否能正常跳轉，能跳轉，則顯示路由添加成功
router.push({name : "sys-UserList"})

 

 

 

固然，不捨棄第一層數據，將其所有拼接成一個數組亦可。

// 保存動態菜單數據
let temp = []
// 若是動態菜單數據存在，對其進行處理
if (results && results.length > 0) {
    // 將所有數據拼接成一個數組
    results.map(value => {
        if (!value.path) {
            temp = temp.concat(value.children)
            value.children = []
            value.path = `/DynamicRoutes-${value.meta.menuId}`
            value.name = `DynamicHome-${value.meta.menuId}`
            temp = temp.concat(value)
        }
    })
}
// 將動態路由信息添加到靜態路由的 children 中
dynamicRoutes[0].children = temp
dynamicRoutes[0].name = 'DynamicRoutes'
// 使用 router 實例的 addRoutes 方法，給當前 router 實例添加一個動態路由
router.addRoutes(dynamicRoutes)
// 查看當前路由信息
console.log(router.options)
// 測試一下路由是否能正常跳轉，能跳轉，則顯示路由添加成功
router.push({name : "sys-UserList"})

 

 

 

（4）獲取動態路由值 -- 方式二
　　使用 vuex 保存動態路由的值，使用時從 vuex 中獲取。
　　以下，在 common.js 中定義相關路由處理操做。

【進行相關處理：】
export default {
    state: {
        dynamicRoutes: []
    },
    // 更改 state（同步）
    mutations: {
        updateDynamicRoutes(state, routes) {
            state.dynamicRoutes = routes
        },
        resetState(state) {
            let stateTemp = {
                dynamicRoutes: []
            }
            Object.assign(state, stateTemp)
        }
    },
    // 異步觸發 mutations
    actions: {
        updateDynamicRoutes({commit, state}, routes) {
            commit("updateDynamicRoutes", routes)
        },
        resetState({commit, state}) {
            commit("resetState")
        }
    }
}


【完整 common.js】
export default {
    // 開啓命名空間（防止各模塊間命名衝突），訪問時須要使用 模塊名 + 方法名
    namespaced: true,
    // 管理數據（狀態）
    state: {
        // 用於保存語言設置（國際化），默認爲中文
        language: 'zh',
        // 表示側邊欄選中的菜單項的名
        menuActiveName: '',
        // 表示標籤頁數據，數組
        mainTabs: [],
        // 表示標籤頁中選中的標籤名
        mainTabsActiveName: '',
        // 用於保存動態路由的數據
        dynamicRoutes: []
    },
    // 更改 state（同步）
    mutations: {
        updateLanguage(state, data) {
            state.language = data
        },
        updateMenuActiveName(state, name) {
            state.menuActiveName = name
        },
        updateMainTabs(state, tabs) {
            state.mainTabs = tabs
        },
        updateMainTabsActiveName(state, name) {
            state.mainTabsActiveName = name
        },
        updateDynamicRoutes(state, routes) {
            state.dynamicRoutes = routes
        },
        resetState(state) {
            let stateTemp = {
                language: 'zh',
                menuActiveName: '',
                mainTabs: [],
                mainTabsActiveName: '',
                dynamicRoutes: []
            }
            Object.assign(state, stateTemp)
        }
    },
    // 異步觸發 mutations
    actions: {
        updateLanguage({commit, state}, data) {
            commit("updateLanguage", data)
        },
        updateMenuActiveName({commit, state}, name) {
            commit("updateMenuActiveName", name)
        },
        updateMainTabs({commit, state}, tabs) {
            commit("updateMainTabs", tabs)
        },
        updateMainTabsActiveName({commit, state}, name) {
            commit("updateMainTabsActiveName", name)
        },
        updateDynamicRoutes({commit, state}, routes) {
            commit("updateDynamicRoutes", routes)
        },
        resetState({commit, state}) {
            commit("resetState")
        }
    }
}

 

 

 

如何在 router 中使用 vuex 呢？
　　經過 router.app.$options.store 能夠獲取到 vuex 內容。

【獲取 state 數據：】
    router.app.$options.store.state
    
【調用 vuex 方法：】
    router.app.$options.store.dispatch()
 
【使用：】 
let results = fnAddDynamicMenuRoutes(response.data.data)
// 若是動態菜單數據存在，對其進行處理
if (results && results.length > 0) {
    // 遍歷第一層數據
    results.map(value => {
        // 若是 path 值不存在，則對其賦值，並指定 component 爲 Home.vue
        if (!value.path) {
            value.path = `/DynamicRoutes-${value.meta.menuId}`
            value.name = `DynamicHome-${value.meta.menuId}`
            value.component = () => import('@/views/Home.vue')
        }
    })
}
// 使用 vuex 管理動態路由數據
router.app.$options.store.dispatch('common/updateDynamicRoutes', results)
console.log(JSON.stringify(router.app.$options.store.state.common.dynamicRoutes))

// 使用 router 實例的 addRoutes 方法，給當前 router 實例添加一個動態路由
router.addRoutes(results)
// 查看當前路由信息
console.log(router.options)
// 測試一下路由是否能正常跳轉，能跳轉，則顯示路由添加成功
router.push({name : "sys-UserList"})

 

 

 

（5）使用 addRoute 添加路由 -- 最終版
　　此項目中，使用 vuex 管理動態菜單數據，而不在 options 中顯示（固然兩種方式結合一塊兒亦可）。
完整 router 的 index.js 邏輯以下。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import {
    getToken
} from '@/http/auth.js'
import http from '@/http/http.js'
import {
    isURL,
    isDynamicRoutes
} from '@/utils/validate.js'

Vue.use(VueRouter)

// 定義路由跳轉規則
// component 採用 路由懶加載形式
// 此項目中，均採用 name 方式指定路由進行跳轉
/* 
    meta 用於定義路由元信息，
其中 
    isRouter 用於指示是否開啓路由守衛（true 表示開啓）。
    isTab 用於表示是否顯示爲標籤頁（true 表示顯示）
    iframeUrl 用於表示 url，使用 http 或者 https 開頭的 url 使用 iframe 標籤展現
*/
const routes = [{
        path: '/',
        redirect: {
            name: "Login"
        }
    },
    {
        path: '/404',
        name: '404',
        component: () => import('@/components/common/404.vue')
    },
    {
        path: '/Login',
        name: 'Login',
        component: () => import('@/components/common/Login.vue')
    },
    {
        path: '/Home',
        name: 'Home',
        component: () => import('@/views/Home.vue'),
        redirect: {
            name: 'HomePage'
        },
        children: [{
                path: '/Home/Page',
                name: 'HomePage',
                component: () => import('@/views/menu/HomePage.vue'),
                meta: {
                    isRouter: true
                }
            },
            {
                path: '/Home/Demo/Echarts',
                name: 'Echarts',
                component: () => import('@/views/menu/Echarts.vue'),
                meta: {
                    isRouter: true,
                    isTab: true
                }
            },
            {
                path: '/Home/Demo/Ueditor',
                name: 'Ueditor',
                component: () => import('@/views/menu/Ueditor.vue'),
                meta: {
                    isRouter: true,
                    isTab: true
                }
            },
            {
                path: '/Home/Demo/Baidu',
                name: 'Baidu',
                meta: {
                    isRouter: true,
                    isTab: true,
                    iframeUrl: '@/test.html'
                }
            },
            // 路由匹配失敗時，跳轉到 404 頁面
            {
                path: "*",
                redirect: {
                    name: '404'
                }
            }
        ]
    }
]

// 建立一個 router 實例
const router = new VueRouter({
    // routes 用於定義 路由跳轉 規則
    routes,
    // mode 用於去除地址中的 #
    mode: 'history',
    // scrollBehavior 用於定義路由切換時，頁面滾動。
    scrollBehavior: () => ({
        y: 0
    }),
    // isAddDynamicMenuRoutes 表示是否已經添加過動態菜單（防止頻繁請求動態菜單）
    isAddDynamicMenuRoutes: false
})

// 添加全局路由導航守衛
router.beforeEach((to, from, next) => {
    // 當開啓導航守衛時，驗證 token 是否存在。
    // to.meta.isRouter 表示是否開啓動態路由
    // isDynamicRoutes 判斷該路由是否爲動態路由（頁面刷新時，動態路由沒有 isRouter 值，此時 to.meta.isRouter 條件不成立，即動態路由拼接邏輯不能執行）
    if (to.meta.isRouter || isDynamicRoutes(to.path)) {
        // console.log(router)
        // 獲取 token 值
        let token = getToken()
        // token 不存在時，跳轉到 登陸頁面
        if (!token || !/\S/.test(token)) {
            next({
                name: 'Login'
            })
        }
        // token 存在時，判斷是否已經獲取過 動態菜單，未獲取，即 false 時，須要獲取
        if (!router.options.isAddDynamicMenuRoutes) {
            http.menu.getMenus().then((response => {
                // 數據返回成功時
                if (response && response.data.code === 200) {
                    // 設置動態菜單爲 true，表示不用再次獲取
                    router.options.isAddDynamicMenuRoutes = true
                    // 獲取動態菜單數據
                    let results = fnAddDynamicMenuRoutes(response.data.data)
                    // 若是動態菜單數據存在，對其進行處理
                    if (results && results.length > 0) {
                        // 遍歷第一層數據
                        results.map(value => {
                            // 若是 path 值不存在，則對其賦值，並指定 component 爲 Home.vue
                            if (!value.path) {
                                value.path = `/DynamicRoutes-${value.meta.menuId}`
                                value.name = `DynamicHome-${value.meta.menuId}`
                                value.component = () => import('@/views/Home.vue')
                            }
                        })
                    }
                    // 使用 vuex 管理動態路由數據
                    router.app.$options.store.dispatch('common/updateDynamicRoutes', results)
                    // 使用 router 實例的 addRoutes 方法，給當前 router 實例添加一個動態路由
                    router.addRoutes(results)
                }
            }))
        }
    }
    next()
})

// 用於處理動態菜單數據，將其轉爲 route 形式
function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
    // 用於保存普通路由數據
    let temp = []
    // 用於保存存在子路由的路由數據
    let route = []
    // 遍歷數據
    for (let i = 0; i < menuList.length; i++) {
        // 存在子路由，則遞歸遍歷，並返回數據做爲 children 保存
        if (menuList[i].subMenuList && menuList[i].subMenuList.length > 0) {
            // 獲取路由的基本格式
            route = getRoute(menuList[i])
            // 遞歸處理子路由數據，並返回，將其做爲路由的 children 保存
            route.children = fnAddDynamicMenuRoutes(menuList[i].subMenuList)
            // 保存存在子路由的路由
            routes.push(route)
        } else {
            // 保存普通路由
            temp.push(getRoute(menuList[i]))
        }
    }
    // 返回路由結果
    return routes.concat(temp)
}

// 返回路由的基本格式
function getRoute(item) {
    // 路由基本格式
    let route = {
        // 路由的路徑
        path: '',
        // 路由名
        name: '',
        // 路由所在組件
        component: null,
        meta: {
            // 開啓路由守衛標誌
            isRouter: true,
            // 開啓標籤頁顯示標誌
            isTab: true,
            // iframe 標籤指向的地址（數據以 http 或者 https 開頭時，使用 iframe 標籤顯示）
            iframeUrl: '',
            // 開啓動態路由標誌
            isDynamic: true,
            // 動態菜單名稱（nameZH 顯示中文， nameEN 顯示英文）
            name_zh: item.name_zh,
            name_en: item.name_en,
            // 動態菜單項的圖標
            icon: item.icon,
            // 菜單項的 ID
            menuId: item.menuId,
            // 菜單項的父菜單 ID
            parentId: item.parentId,
            // 菜單項排序依據
            orderNum: item.orderNum,
            // 菜單項類型（0: 目錄，1: 菜單項，2: 按鈕）
            type: item.type
        },
        // 路由的子路由
        children: []
    }
    // 若是存在 url，則根據 url 進行相關處理（判斷是 iframe 類型仍是 普通類型）
    if (item.url && /\S/.test(item.url)) {
        // 若 url 有前綴 /，則將其去除，方便後續操做。
        item.url = item.url.replace(/^\//, '')
        // 定義基本路由規則，將 / 使用 - 代替
        route.path = item.url.replace('/', '-')
        route.name = item.url.replace('/', '-')
        // 若是是 外部 url，使用 iframe 標籤展現，不用指定 component，從新指定 path、name 以及 iframeUrl。
        if (isURL(item.url)) {
            route['path'] = `iframe-${item.menuId}`
            route['name'] = `iframe-${item.menuId}`
            route['meta']['iframeUrl'] = item.url
        } else {
            // 若是是項目模塊，使用 route-view 標籤展現，須要指定 component(加載指定目錄下的 vue 組件)
            route.component = () => import(`@/views/dynamic/${item.url}.vue`) || null
        }
    }
    // 返回 route
    return route
}

// 解決相同路徑跳轉報錯
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject)
        return routerPush.call(this, location, onResolve, onReject)
    return routerPush.call(this, location).catch(error => error)
}

export default router

 

2、動態菜單的展現

　　前面已經獲取到了動態菜單數據，並使用 vuex 對其進行了管理。
　　如今只須要將數據進行展現便可。

一、定義一個 DynamicMenu.vue 組件

　　定義一個 DynamicMenu.vue 組件，用於展現動態菜單。
　　與以前寫 Aside.vue 代碼相似，將其 copy 過來直接修改便可。
其中：
　　menu 表示菜單項數據，是由父組件經過 props 傳遞進來的。
　　index 顯示菜單選中項，經過 menu.name 綁定。
　　icon 顯示菜單項圖標，經過 menu.meta.icon 綁定。
　　菜單數據國際化經過 menu.meta.name_zh、menu.meta.name_en 綁定。
　　subMenu 表示當前菜單的子菜單選項，須要綁定路由跳轉事件。
　　而路由跳轉事件的相關處理，在以前的一篇博客中已經作了處理，此處直接使用便可。
路由跳轉、iframe 嵌套參考：http://www.javashuo.com/article/p-kdsxudln-hb.html

<template>
    <el-submenu :index="menu.name">
        <template slot="title">
            <i :class="menu.meta.icon"></i>
            <span>{{$i18n.locale === 'zh' ? menu.meta.name_zh : menu.meta.name_en}}</span>
        </template>
        <el-menu-item v-for="subMenu in menu.children" :key="subMenu.meta.menuId" :index="subMenu.name" @click="$router.push({ name: subMenu.name })">
            <i :class="subMenu.meta.icon"></i>
            <span slot="title">{{$i18n.locale === 'zh' ? subMenu.meta.name_zh : subMenu.meta.name_en}}</span>
        </el-menu-item>
    </el-submenu>
</template>

<script>
    export default {
        name: 'DynamicMenu',
        props: {
            menu: {
                type: Object,
                required: true
            }
        }
    }
</script>

<style>
</style>

 

 

二、在 Aside.vue 中引入 DynamicMenu.vue

　　組件定義好後，就須要引入了。
（1）引入動態菜單組件：
Step1：import 引入相關組件。
Step2：components 聲明相關組件。
Step3：使用組件。

<template>
    <DynamicMenu v-for="menu in dynamicRoutes" :key="menu.meta.menuId" :menu="menu"></DynamicMenu>
</template>        
<script>
    import DynamicMenu from '@/views/dynamic/DynamicMenu.vue'
    export default {
        name: 'Aside',
        components: {
            DynamicMenu
        }
    }
</script>

 

 

（2）引入 vuex 管理的動態菜單數據
　　因爲以前已經引入過 vuex，此處直接引入 動態菜單數據 dynamicRoutes 便可。

computed: {
    ...mapState('common', ['menuActiveName', 'mainTabs', 'dynamicRoutes'])
}

 

 

三、完整效果