github上關于vue動態添加路由的例子很多，本項目參考了部分項目后，在iview框架基礎上完成了動態路由的動態添加和菜單刷新。為了幫助其他需要的朋友，現分享出實現邏輯，歡迎一起交流學習。
Github地址
實現目標
客戶端從服務端拿到路由和權限數據后，刷新項目的路由和菜單列表，并進行權限控制。
項目基礎
實現邏輯
動態路由控制加載
一般來說，動態路由控制分為兩種：一種是將所有路由數據存儲在本地文件中，然后從服務端獲取用戶的權限信息，在路由跳轉時，添加權限判斷鉤子，如果用戶前往的頁面不在權限列表內，則禁止跳轉。另一種則是本地只存儲基本路由，如錯誤處理頁面、無權限控制頁面等，而權限路由則從服務器獲取，服務器根據用戶的權限下發相應的路由數據，客戶端利用這些數據進行路由的動態生成和添加，本文采用的是第二種方法。
iview-admin項目將路由分為三種：
拿到路由數據后，我們主要進行兩部分操作，第一部分是遍歷數據，利用組件異步加載的方法，加載每個路由節點對應的組件，之后利用 router.addRoutes(routes) 完成路由列表的動態添加；第二部分是因為 iview-admin 框架下的頁面標簽和面包屑導航，需要遍歷appRouter獲取路由信息，所以我們也需要將路由數據存入 vuex ，以便全局訪問。
需要特別注意的是，如果404頁面為靜態路由，那么第一次進入頁面時，這時動態路由還未加載，找不到路由地址會默認跳轉到404錯誤頁，體驗很差，所以404路由先不寫入路由規則中，和動態路由一起加載。
主要代碼實現如下：
數據請求及路由節點生成
//util.js//生成路由util.initRouter = function (vm) { const constRoutes = []; const otherRoutes = []; // 404路由需要和動態路由一起注入 const otherRouter = [{ path: '/*', name: 'error-404', meta: { title: '404-頁面不存在' }, component: 'error-page/404' }]; // 模擬異步請求 util.ajax('menu.json').then(res => { var menuData = res.data; util.initRouterNode(constRoutes, menuData); util.initRouterNode(otherRoutes, otherRouter); // 添加主界面路由 vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0)); // 添加全局路由 vm.$store.commit('updateDefaultRouter', otherRoutes); // 刷新界面菜單 vm.$store.commit('updateMenulist', constRoutes.filter(item => item.children.length > 0)); });};//生成路由節點util.initRouterNode = function (routers, data) { for (var item of data) { let menu = Object.assign({}, item); menu.component = lazyLoading(menu.component); if (item.children && item.children.length > 0) { menu.children = []; util.initRouterNode(menu.children, item.children); } //添加權限判斷 meta.permission = menu.permission ? menu.permission : null; //添加標題 meta.title = menu.title ? menu.title : null; menu.meta = meta; }};動態加載組件
//lazyLoading.jsexport default (url) =>()=>import(`@/views/${url}.vue`)Store緩存實現//app.js // 動態添加主界面路由，需要緩存updateAppRouter (state, routes) { state.routers.push(...routes); router.addRoutes(routes);},// 動態添加全局路由，不需要緩存updateDefaultRouter (state, routes) { router.addRoutes(routes);},// 接受前臺數組，刷新菜單updateMenulist (state, routes) { state.menuList = routes;}最后在main.js中進行調用
//main.js mounted () { // 調用方法，動態生成路由 util.initRouter(this); }權限控制
同動態路由實現方法類似，操作權限控制也一般也分為兩種，第一種是頁面顯示時不控制權限，所有的操作，比如按鈕全部展現，然后在操作發起時，進行權限判斷，如果用戶擁有該操作的權限，則通過，否則提醒用戶無權限，第二種則是在頁面加載的時候，就進行權限判斷，無權限的操作不進行顯示。本人更喜歡第二種方法，這樣不會對用戶進行誤導，個人認為用戶看到的應該就行可操作的，不然點下按鈕再提示無權限的感覺一定很不爽。
本項目的思路來源見參考博文，原博主的具體思路是：在路由結構的meta字段中，添加用戶操作權限列表，然后注冊全局指令，當節點初次渲染時，判斷該頁面是否存在權限，如果存在，并且傳入的參數不在權限列表中，則直接刪除該節點。
主要代碼實現如下：
在路由數據中添加 permission 字段，存放權限列表
//menu.json，模擬異步請求數據[ { "path": "/groupOne", "icon": "ios-folder", "name": "system_index", "title": "groupOne", "component": "Main", "children": [ { "path": "pageOne", "icon": "ios-paper-outline", "name": "pageOne", "title": "pageOne", "component": "group/page1/page1", "permission":["del"] }, ... ] }]在遍歷生成路由節點時，將 permission 字段數據存入路由節點 meta 屬性中
//util.js//生成路由節點util.initRouterNode = function (routers, data) { for (var item of data) { .... //添加權限判斷 meta.permission = menu.permission ? menu.permission : null; ... }};定義全局命令組件，讀取路由 permission 屬性值獲得權限列表，如果該不權限在權限列表中，則刪除節點
//hasPermission.js const hasPermission = { install (Vue, options) { Vue.directive('hasPermission', { bind (el, binding, vnode) { let permissionList = vnode.context.$route.meta.permission; if (permissionList && permissionList.length && !permissionList.includes(binding.value)) { el.parentNode.removeChild(el); } } }); }};export default hasPermission;權限組件使用示例：
<template> <div> <h1>page1</h1> <Button v-hasPermission="'add'">添加</Button> <Button v-hasPermission="'edit'">修改</Button> <Button v-hasPermission="'del'">刪除</Button> </div></template>
全局注冊組件
// main.jsimport hasPermission from '@/libs/hasPermission.js';Vue.use(hasPermission);
這種權限控制方法的優點就是，不管是管理配置還是頁面處理邏輯都相對簡單，沒有很多重復的代碼判斷和節點處理，在參考對比了網上幾種實現方式后，個人比較推薦這一種方法。
頁面標簽和面包屑導航
在我看來，頁面標簽和面包屑都屬于系統中錦上添花的頁面相關控件，提高頁面管理的便捷性，在iview官方admin項目中已經實現了這兩個組件。所以這個項目中，只是將其進行移植，實現了組件功能，沒有深入了解，感興趣的可以仔細研究。
總結
以上所述是小編給大家介紹的vue iview實現動態路由和權限驗證功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
