基於Vue的addRoutes實現許可權控制

從今年3月到現在入門前端也已經有兩個月了，這兩個月在自學的過程中遇到了許多問題也解決了其中一部分，但是現在才開始意識到把學習過程的問題整理到csdn上。最近老師布置了基於vue的許可權控制，網上查閱了許多部落格，例如「前端路上":這篇文章提到了vue2.0以上使用的addroutes增加動態路由的思路。然而我只是乙個小白，儘管文章裡貼出了原始碼，我也只能看的一知半解，所以根據文章中提供的思路自己寫了乙個小測試demo。

在路由配置檔案裡寫上兩個路由表，乙個靜態路由表（所有許可權使用者均能訪問如「登入」、「404頁」）和乙個動態路由表，預設匯出靜態路由。

const router = new router(,
,]});
export default router //預設靜態路由

export const dynamicrouter =[ //動態路由
,    component: (resolve) => require(['../components/home.vue'], resolve)
},,    component: (resolve) => require(['../components/home2.vue'], resolve)
},,    component: (resolve) => require(['../components/home21.vue'], resolve)
},,    component: (resolve) => require(['../components/home11.vue'], resolve)
},];

這裡我們已經配置好了路由表。

methods: }},
created()

html：

template>

js:

import  from '../router/index' //獲取路由配置檔案裡的兩個路由表
export default 
},methods: else ,
})

第一次寫部落格還是有點激動的，不知道這個許可權控制思路能不能對大家有所幫助。這樣的許可權控制其實分不同許可權寫了幾套頁面，然後根據許可權動態新增符合許可權的頁面。其實我一開始的設想是乙個主頁的選單欄根據不同許可權的使用者顯示不同的導航(這個實現效果看「前端路上」大能分享的github上原始碼)，但是技術有限還未能實現，後續實現後會貼出來的。

基於Vue的addRoutes實現許可權控制

基於vue的UI框架

基於vue的移動框架

基於vue的element table分頁選中

基於Vue的addRoutes實現許可權控制

基於vue的UI框架

基於vue的移動框架

基於vue的element table分頁選中

相關推薦