Vue Element前端應用開發之動態選單和路由的關聯處理
概述
在我開發的很多系統裡面,包括Winform混合框架、Bootstrap開發框架等系列產品中,我都傾向於動態配置選單,並管理對應角色的選單許可權和頁面許可權,實現系統對使用者許可權的控制,選單一般包括有名稱、圖示、順序、URL連線等相關資訊,對於vue+Element 前端應用來說,應該原理上差不多,本篇隨筆介紹結合服務端的動態選單配置和本地路由的關聯處理,實現動態選單的維護和展示的處理。
1、選單和路由的處理過程
由於Vue前端還需要引入路由這個概念,路由是我們前端可以訪問到的對應路徑集合,路由定義了常規選單說沒有的很多複雜資訊,但是往往這些是我們不能隨意修改的,因此我們做法是以本地配置好的路由列表為基準,而選單我們採用在後盾配置方式,前端通過介面動態獲取選單列表,通過選單的名稱和路由名稱的對應關係,我們以選單集合為對照,然後過濾本地所有靜態路由的列表,然後獲得使用者可以訪問的路由列表,設定動態路由給前端,從而實現了介面根據使用者角色/許可權的不同,而變化使用者的選單介面和可訪問路由集合。
選單路由處理的大概的操作過程如下所示
前端介面的動態選單、本地路由、選單導航和可訪問路由的幾個概念如下所示。
在前端介面處理中,我們通過Element介面元件的方式展示動態選單資訊,並結合選單和路由的關係,實現選單跳轉到對應檢視的處理過程。
2、選單和路由列表
根據前面的介紹,我們定義了一些從服務端返回的動態選單信www.cppcns.com息,這些選單資訊是一個jsON物件集合,如下介面所示。
[ { id: '1',pid: '-1',text: '首頁',icon: 'dashboard',name: 'dashboard' },{ id: '2',text: '產品列表',icon: 'table',name: 'product' },{ id: '3',text: '一級選單',icon: 'example',children: [ { id: '3-1',pid: '3',text: '二級選單1',name: 'icon',icon: 'example' },{ id: '3-2',text: '二級選單2',icon: 'tree',children: [ { id: '3-2-1',pid: '3-2',text: '三級選單1',name: 'form',icon: 'form' },http://www.cppcns.com{ id: '3-2-2',text: '三級選單2',name: 'menu1-1',{ id: '3-2-3',text: '三級選單3',name: 'menu1-2',{ id: '3-2-4',text: '三級選單4',name: 'menu1-3',icon: 'form' } ] } ] },{ id: '99',text: '公司官網',name: 'external-link' } ]
選單的JSON是根據角色進行動態獲取的,不同的角色對應不同的選單集合,並且選單是一個多層次的樹列表,可以定義無窮多級的展示,JSON格式化檢視如下所示。
而Vue前端需要初始化定義前端頁面的所有路由,這些包括路由頁面的Layout等資訊。
我們可以在一個JS檔案裡面定義好對應前端所有的路由資訊,如下所示
// 定義本系統的所有路由,具體路由呈現經過選單資料過濾 export const asyncRoutes = { 'dashboard': { path: '/dashboard',component: Layout,children: [{ path: 'dashboard',name: 'dashboard',component: () => import('@/views/dashboard/index') }] },'product': { path: '/product',com程式設計客棧ponent: Layout,chtqGPDdPildren: [{ path: '/product',name: 'product',component: () => import('@/views/Product程式設計客棧/index') }] },.............................. //省略部分 'icon': { path: '/icon',children: [{ path: '/icon',component: () => import('@/views/icons/index') }] },'external-link': { path: 'http://www.iqidi.com',name: 'external-link' } }
這裡的路由不需要巢狀,因為選單展示才需要定義巢狀關係。
另外,由於系統在未登入請求後端動態選單前,我們系統也需要正常執行起來,那麼就需要預設一些基礎的路由資訊,如登入介面、重定向頁面、首頁連結等這些路由資訊,因此我們可以分開兩個路由物件,用來分開管理這些資訊。
對路由的管理,一個需要預設建立路由的處理、重置路由的處理,以及動態設定新的路由處理,我們封裝幾個函式來處理這些操作。
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 }
使用者在經過登入介面處理後,就會通過對應的Action獲取動態路由資訊(注意,這裡是先獲取動態選單,然後過濾本地路由,即為動態路由資訊),獲得動態路由後,就設定前端所能訪問的路由集合即可,如下程式碼所示。
有了這些新的路由允許,前端系統的選單才能夠正常運轉起來,否則即使介面展示了選單,也不能訪問特定的檢視頁面而跳到了404頁面,因為路由沒有。
3、登入的過程處理
前面大概介紹了路由的處理過程,其實我們路由資訊,應該需要從登入介面開始講起。
以登入介面為例,在使用者登入處理後,需要先驗證使用者的賬號密碼,成功後繼續請求該使用者對應的動態選單集合,並通過路由切換到對應的頁面或者首頁。
在Store/Modules/user.js模組裡面,定義了對應的登陸處理Action,如下所示
我們這裡忽略使用者登入的檢驗和處理token的過程,主要關注動態選單請求並設定路由的過程。
在我們需要攔截路由到達前的處理中,我們定義對應的路由資訊請求邏輯,如下所示。
router.beforeEach(async(to,from,next) => {
在處理選單路由的對應模組裡面,我們定義了一個狀態用來承載這些重要資訊,如下定義State所示。
const state = { menuItems: [],routes: [],addRoutes: [],asyncRoutes: asyncRoutes }
// 定義了路由和選單的Mutation const mutations = { SET_ROUTES: (state,routes) => { // var list = convertRoute(routes) routes.push({ path: '*',redirect: '/404',hidden: true }) // 此為預設錯誤路由 state.addRoutes = routes state.routes = [].concat(routes)// constantRoutes.concat(routes) },SET_MENUS: (state,menus) => { state.menuItems = menus } }
// 定義了生成動態路由的Action處理 const actions = { generateRoutes({ commit },roles) { return new Promise(resolve => { getMenus().then(res => { const menus = res.data || [] // 統一通過介面獲取選單資訊 const routes = [] menus.forEach(item => { filterRoutes(routes,item) }) console.log(routes)// 列印路由 commit('SET_ROUTES',routes) commit('SET_MENUS',menus) resolve(routes) }); }) } }
最後返回對應的JS定義模組類資訊即可。
export default { namespaced: true,state,mutations,actions }
在前端介面處理中,我們通過Element介面元件的方式展示動態選單資訊,並結合選單和路由的關係,實現選單跳轉到對應檢視的處理過程。
我們來看看介面生成的動態選單效果。
由於選單動態展示和動態路由配合,因此既能在前端實現動態選單的展示,又會根據選單的集合重新整理可訪問路由,兩者結合就可以順利開啟對應的檢視頁面了。
再來回顧一下,選單路由處理的大概的操作過程如下所示
以上就是Vue Element前端應用開發之動態選單和路由的關聯處理的詳細內容,更多關於Vue Element之動態選單和路由的資料請關注我們其它相關文章!