在我開發(fā)的很多系統(tǒng)里面，包括Winform混合框架、Bootstrap開發(fā)框架等系列產(chǎn)品中，我都傾向于動(dòng)態(tài)配置菜單，并管理對(duì)應(yīng)角色的菜單權(quán)限和頁面權(quán)限，實(shí)現(xiàn)系統(tǒng)對(duì)用戶權(quán)限的控制，菜單一般包括有名稱、圖標(biāo)、順序、URL連接等相關(guān)信息，對(duì)于VUE+Element 前端應(yīng)用來說，應(yīng)該原理上差不多，本篇隨筆介紹結(jié)合服務(wù)端的動(dòng)態(tài)菜單配置和本地路由的關(guān)聯(lián)處理，實(shí)現(xiàn)動(dòng)態(tài)菜單的維護(hù)和展示的處理。

由于Vue前端還需要引入路由這個(gè)概念，路由是我們前端可以訪問到的對(duì)應(yīng)路徑集合，路由定義了常規(guī)菜單說沒有的很多復(fù)雜信息，但是往往這些是我們不能隨意修改的，因此我們做法是以本地配置好的路由列表為基準(zhǔn)，而菜單我們采用在后盾配置方式，前端通過接口動(dòng)態(tài)獲取菜單列表，通過菜單的名稱和路由名稱的對(duì)應(yīng)關(guān)系，我們以菜單集合為對(duì)照，然后過濾本地所有靜態(tài)路由的列表，然后獲得用戶可以訪問的路由列表，設(shè)置動(dòng)態(tài)路由給前端，從而實(shí)現(xiàn)了界面根據(jù)用戶角色/權(quán)限的不同，而變化用戶的菜單界面和可訪問路由集合。

菜單路由處理的大概的操作過程如下所示

前端界面的動(dòng)態(tài)菜單、本地路由、菜單導(dǎo)航和可訪問路由的幾個(gè)概念如下所示。

在前端界面處理中，我們通過Element界面組件的方式展示動(dòng)態(tài)菜單信息，并結(jié)合菜單和路由的關(guān)系，實(shí)現(xiàn)菜單跳轉(zhuǎn)到對(duì)應(yīng)視圖的處理過程。

根據(jù)前面的介紹，我們定義了一些從服務(wù)端返回的動(dòng)態(tài)菜單信息，這些菜單信息是一個(gè)JSON對(duì)象集合，如下界面所示。

[ { id: ’1’, pid: ’-1’, text: ’首頁’, icon: ’dashboard’, name: ’dashboard’ }, { id: ’2’, pid: ’-1’, text: ’產(chǎn)品列表’, icon: ’table’, name: ’product’ }, { id: ’3’, pid: ’-1’, text: ’一級(jí)菜單’, icon: ’example’, children: [ {id: ’3-1’,pid: ’3’,text: ’二級(jí)菜單1’,name: ’icon’,icon: ’example’ }, {id: ’3-2’,pid: ’3’,text: ’二級(jí)菜單2’,icon: ’tree’,children: [ { id: ’3-2-1’, pid: ’3-2’, text: ’三級(jí)菜單1’, name: ’form’, icon: ’form’ }, { id: ’3-2-2’, pid: ’3-2’, text: ’三級(jí)菜單2’, name: ’menu1-1’, icon: ’form’ }, { id: ’3-2-3’, pid: ’3-2’, text: ’三級(jí)菜單3’, name: ’menu1-2’, icon: ’form’ }, { id: ’3-2-4’, pid: ’3-2’, text: ’三級(jí)菜單4’, name: ’menu1-3’, icon: ’form’ }] } ] }, { id: ’99’, pid: ’-1’, text: ’公司官網(wǎng)’, icon: ’table’, name: ’external-link’ }]

菜單的JSON是根據(jù)角色進(jìn)行動(dòng)態(tài)獲取的，不同的角色對(duì)應(yīng)不同的菜單集合，并且菜單是一個(gè)多層次的樹列表，可以定義無窮多級(jí)的展示，JSON格式化視圖如下所示。

而Vue前端需要初始化定義前端頁面的所有路由，這些包括路由頁面的Layout等信息。

我們可以在一個(gè)JS文件里面定義好對(duì)應(yīng)前端所有的路由信息，如下所示

// 定義本系統(tǒng)的所有路由，具體路由呈現(xiàn)經(jīng)過菜單數(shù)據(jù)過濾export const asyncRoutes = { ’dashboard’: { path: ’/dashboard’, component: Layout, children: [{ path: ’dashboard’, name: ’dashboard’, component: () => import(’@/views/dashboard/index’) }] }, ’product’: { path: ’/product’, component: Layout, children: [{ path: ’/product’, name: ’product’, component: () => import(’@/views/Product/index’) }] }, .............................. //省略部分 ’icon’: { path: ’/icon’, component: Layout, children: [{ path: ’/icon’, name: ’icon’, component: () => import(’@/views/icons/index’) }] }, ’external-link’: { path: ’http://www.iqidi.com’, name: ’external-link’ }}

這里的路由不需要嵌套，因?yàn)椴藛握故静判枰x嵌套關(guān)系。

另外，由于系統(tǒng)在未登錄請(qǐng)求后端動(dòng)態(tài)菜單前，我們系統(tǒng)也需要正常運(yùn)行起來，那么就需要預(yù)設(shè)一些基礎(chǔ)的路由信息，如登錄界面、重定向頁面、首頁鏈接等這些路由信息，因此我們可以分開兩個(gè)路由對(duì)象，用來分開管理這些信息。

對(duì)路由的管理，一個(gè)需要默認(rèn)創(chuàng)建路由的處理、重置路由的處理，以及動(dòng)態(tài)設(shè)置新的路由處理，我們封裝幾個(gè)函數(shù)來處理這些操作。

const createRouter = () => new Router({ // mode: ’history’, // require service support scrollBehavior: () => ({ y: 0 }), routes: constantRoutes})const router = createRouter()// 重置路由export function resetRouter() { const newRouter = createRouter() router.matcher = newRouter.matcher // reset router}

用戶在經(jīng)過登錄界面處理后，就會(huì)通過對(duì)應(yīng)的Action獲取動(dòng)態(tài)路由信息（注意，這里是先獲取動(dòng)態(tài)菜單，然后過濾本地路由，即為動(dòng)態(tài)路由信息），獲得動(dòng)態(tài)路由后，就設(shè)置前端所能訪問的路由集合即可，如下代碼所示。

有了這些新的路由允許，前端系統(tǒng)的菜單才能夠正常運(yùn)轉(zhuǎn)起來，否則即使界面展示了菜單，也不能訪問特定的視圖頁面而跳到了404頁面，因?yàn)槁酚蓻]有。

前面大概介紹了路由的處理過程，其實(shí)我們路由信息，應(yīng)該需要從登錄界面開始講起。

以登錄界面為例，在用戶登錄處理后，需要先驗(yàn)證用戶的賬號(hào)密碼，成功后繼續(xù)請(qǐng)求該用戶對(duì)應(yīng)的動(dòng)態(tài)菜單集合，并通過路由切換到對(duì)應(yīng)的頁面或者首頁。

在Store/Modules/user.js模塊里面，定義了對(duì)應(yīng)的登陸處理Action，如下所示

我們這里忽略用戶登錄的檢驗(yàn)和處理token的過程，主要關(guān)注動(dòng)態(tài)菜單請(qǐng)求并設(shè)置路由的過程。

在我們需要攔截路由到達(dá)前的處理中，我們定義對(duì)應(yīng)的路由信息請(qǐng)求邏輯，如下所示。

router.beforeEach(async(to, from, next) => {

在處理菜單路由的對(duì)應(yīng)模塊里面，我們定義了一個(gè)狀態(tài)用來承載這些重要信息，如下定義State所示。

const state = { menuItems: [], routes: [], addRoutes: [], asyncRoutes: asyncRoutes}

// 定義了路由和菜單的Mutationconst mutations = { SET_ROUTES: (state, routes) => { // var list = convertRoute(routes) routes.push({ path: ’*’, redirect: ’/404’, hidden: true }) // 此為默認(rèn)錯(cuò)誤路由 state.addRoutes = routes state.routes = [].concat(routes)// constantRoutes.concat(routes) }, SET_MENUS: (state, menus) => { state.menuItems = menus }}

// 定義了生成動(dòng)態(tài)路由的Action處理const actions = { generateRoutes({ commit }, roles) { return new Promise(resolve => { getMenus().then(res => {const menus = res.data || [] // 統(tǒng)一通過接口獲取菜單信息const routes = []menus.forEach(item => { filterRoutes(routes, item)})console.log(routes)// 打印路由commit(’SET_ROUTES’, routes)commit(’SET_MENUS’, menus)resolve(routes) }); }) }}

最后返回對(duì)應(yīng)的JS定義模塊類信息即可。

export default { namespaced: true, state, mutations, actions}

在前端界面處理中，我們通過Element界面組件的方式展示動(dòng)態(tài)菜單信息，并結(jié)合菜單和路由的關(guān)系，實(shí)現(xiàn)菜單跳轉(zhuǎn)到對(duì)應(yīng)視圖的處理過程。

我們來看看界面生成的動(dòng)態(tài)菜單效果。

由于菜單動(dòng)態(tài)展示和動(dòng)態(tài)路由配合，因此既能在前端實(shí)現(xiàn)動(dòng)態(tài)菜單的展示，又會(huì)根據(jù)菜單的集合刷新可訪問路由，兩者結(jié)合就可以順利打開對(duì)應(yīng)的視圖頁面了。

再來回顧一下，菜單路由處理的大概的操作過程如下所示

以上就是Vue Element前端應(yīng)用開發(fā)之動(dòng)態(tài)菜單和路由的關(guān)聯(lián)處理的詳細(xì)內(nèi)容，更多關(guān)于Vue Element之動(dòng)態(tài)菜單和路由的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！