基於Vue element admin實現動態路由

通常我們在vue專案中都是前端配置好路由的，但在一些專案中我們可能會遇到許可權控制，這樣我們就涉及到動態路由的設定了

動態路由設定一般有兩種：

(1)、簡單的角色路由設定：比如只涉及到管理員和普通使用者的許可權。通常直接在前端進行簡單的角色許可權設定

(2)、複雜的路由許可權設定：比如oa系統、多種角色的許可權配置。通常需要後端返回路由列表，前端渲染使用

（1）配置專案路由許可權

// router.js
import vue from 'vue'
import router from 'vue-router'
import layout from '@/layout'
vue.use(router)
let asyncroutes = [
,children: [},}
]}, ]
let router = new router(),
routes: asyncroutes
})export default router

（2）新建乙個公共的asyncrouter.js檔案

// asyncrouter.js
//判斷當前角色是否有訪問許可權
function haspermission(roles, route)  else 
}// 遞迴過濾非同步路由表，篩選角色許可權路由
export function filterasyncroutes(routes, roles) 
if (haspermission(roles, tmp)) 
res.push(tmp)}})
return res
}

3）建立路由守衛：建立公共的permission.js檔案，設定路由守衛

import router from './router'
import store from './store'
import nprogress from 'nprogress' // 進度條外掛程式
import 'nprogress/nprogress.css' // 進度條樣式
import  from '@/utils/auth' 
import  from '@/utils/asyncrouter.js'
nprogress.configure() // 進度條配置
const whitelist = ['/login'] 
router.beforeeach(async (to, from, next) => )
nprogress.done()
} else  else )
} catch (error) `)
nprogress.done()}}
}} else  else `)
// 結束精度條
nprogress.done()}}
})router.aftereach(() => )

（4）在main.js中引入permission.js檔案

（5）在login登入的時候將roles儲存到store中（1）配置專案路由檔案，該檔案中沒有路由，或者存在一部分公共路由，即沒有許可權的路由

import vue from 'vue'
import router from 'vue-router'
import layout from '@/layout';
vue.use(router)
// 配置專案中沒有涉及許可權的公共路由
export const constantroutes = [,,
]const createrouter = () => new router(),
routes: constantroutes
})const router = createrouter()
export function resetrouter() 
export default router

（2）新建乙個公共的asyncrouter.js檔案

// 引入路由檔案這種的公共路由
import  from '../router';
// layout 元件是專案中的主頁面，切換路由時，僅切換layout中的元件
import layout from '@/layout';
export function getasyncroutes(routes) ;
if (item.component)  else `],resolve)
// 此處用reqiure比較好，import引入變數會有各種莫名的錯誤
// newitem.component = (() => import(`@/views/$`));}}
for (const key in item) 
}// 若遍歷的當前路由存在子路由，需要對子路由進行遞迴遍歷
if (newitem.children && newitem.children.length) 
res.push(newitem)
})// 返回處理好且可用的路由陣列
return res
}

（3）建立路由守衛：建立公共的permission.js檔案，設定路由守衛

//  進度條引入設定如上面第一種描述一樣
import router from './router'
import store from './store'
import nprogress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import  from '@/utils/auth' // get token from cookie
import  from '@/utils/asyncrouter'
const whitelist = ['/login'];
router.beforeeach( async (to, from, next) => )
nprogress.done()
} else  else )
} catch (error) `)
nprogress.done()}}
}} else  else `)
nprogress.done()}}
})router.aftereach(() => )

（4）在main.js中引入permission.js檔案

（5）在login登入的時候將路由資訊儲存到store中

// 登入介面呼叫後，呼叫路由介面，後端返回相應使用者的路由res.router，我們需要儲存到store中，方便其他地方拿取

this.$store.dispatch("addroutes", res.router);

到這裡，整個動態路由就可以走通了，但是頁面跳轉、路由守衛處理是非同步的，會存在動態路由新增後跳轉的是空白頁面，這是因為路由在執行next()時，router裡面的資料還不存在，此時，你可以通過window.location.reload()來重新整理路由

routerlist = [
,        "children": [
},},]}
]

注意：vue是單頁面應用程式，所以頁面一重新整理資料部分資料也會跟著丟失，所以我們需要將store中的資料儲存到本地，才能保證路由不丟失。關於vue頁面重新整理儲存頁面狀態，可以檢視 vue如何在頁面重新整理時保留狀態資訊

基於Vue element admin實現動態路由

AspectJ基於xml和基於註解

拓撲排序（基於dfs 基於佇列）

基於insert update delete的注入

基於Vue element admin實現動態路由

AspectJ基於xml和基於註解

拓撲排序（基於dfs 基於佇列）

基於insert update delete的注入

相關推薦