這篇文章將為大家詳細講解有關(guān)使用vue-router實現(xiàn)動態(tài)權(quán)限控制的示例分析,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
10年積累的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)經(jīng)驗,可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你,你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程,更有汝城免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
使用vue開發(fā)帶權(quán)限管理系統(tǒng),尤其是采用了vue-router做路由,很多人都遇到的一個問題就是如何動態(tài)加載路由path對應(yīng)的component。
典型的應(yīng)用場景就是:前端菜單不靜態(tài)的寫在vue程序里,而是要從后臺程序和數(shù)據(jù)庫返回的菜單來動態(tài)加載到vue應(yīng)用中。
網(wǎng)上很多問權(quán)限的問題,但幾乎找不到很好的解決答案,在很長一段時間里,非常打擊使用vue技術(shù)棧開發(fā)的信心。問題是:
1)登錄之后跳轉(zhuǎn)到首頁,此時路由已經(jīng)是加載完成的了不能更改,菜單可以顯示但是沒有路由。
2)前端應(yīng)用人為刷新網(wǎng)頁路由產(chǎn)生某些問題。
本文即在這篇文章的基礎(chǔ)上對這兩個問題解決,以使其完整。
前提是認真拜讀上面提到的那篇文章,下面直接用代碼說話:
問題1的解決思路:
登錄之后跳轉(zhuǎn)到首頁,router是vue應(yīng)用的router 引入進登錄方法,在登錄之后跳轉(zhuǎn)之前對router進行改變,改變要點1是精確賦值到router的routes具體地方,比如我這里是routes[0]的子路由,2是用addRoutes函數(shù)使其生效。
登錄功能的js
export const login = ({commit}, data) => { Service.post('/login', Qs.stringify(data)) .then(res => { const success = Object.is(res.statusText, 'OK') && Object.is(res.data.code, '0') if (success) { var menus = generateMenus(res.data.menus) window.sessionStorage.routes = JSON.stringify(menus) if (menuModule.state.items.length <= 0) { // 避免注銷后在不刷新頁面的情況下再登錄重復加載路由 commit(types.ADD_MENU, menus) // 動態(tài)加載路由關(guān)鍵2行 router.options.routes[0].children.push(...generateRoutesFromMenu(menuModule.state.items)) router.addRoutes(router.options.routes) } window.sessionStorage.loginName = data.loginName router.push({path: '/'}) } else { commit('loginErr', res.data.msg) } }) } function generateRoutesFromMenu (menu = [], routes = []) { for (let i = 0, l = menu.length; i < l; i++) { let item = menu[i] if (item.path) { routes.push(item) } if (!item.component) { item.component = resolve => require([`views/` + item.component + `.vue`], resolve) generateRoutesFromMenu(item.children, routes) } } return routes }
問題2的解決思路:
是不在主app里引入實例化vue-router的js,而是直接在app里實例化router,目的就是網(wǎng)頁刷新的時候每次都確保生成動態(tài)的router。
app.js部分代碼:
Vue.use(Router) let menus = window.sessionStorage.routes //登錄成功返回的菜單 if (menus) { let items = JSON.parse(menus) store.commit(ADD_MENU, items) } const router = new Router({ mode: 'hash', linkActiveClass: 'is-active', scrollBehavior: () => ({ y: 0 }), routes: [ { name: 'Main', path: '/', component: require('views/Main.vue'), children: [ //動態(tài)路由之所以作為Main的子路由是基于:登錄之后跳轉(zhuǎn)到Main主頁,該主頁是類似于frame的頁面加載框架,只有將動態(tài)路由作為Main的子路由才能確保其他頁面顯示到Main框架內(nèi)。 ...generateRoutesFromMenu(menuModule.state.items) ] }, { name: 'Login', path: '/login', component: require('views/Login.vue') } ] }) function generateRoutesFromMenu (menu = [], routes = []) { for (let i = 0, l = menu.length; i < l; i++) { let item = menu[i] if (item.path) { routes.push(item) } if (!item.component) { item.component = resolve => require([`views/` + item.component + `.vue`], resolve) generateRoutesFromMenu(item.children, routes) } } return routes }
另附menu items代碼
const state = { items: [ // 什么菜單都不定義,完全由后端返回 ] } const mutations = { [types.ADD_MENU] (state, menuItems) { if (menuItems.length > 0) { menuItems.map(function (item) { item.children.map(function (child) { child.component = lazyLoading(child.component) }) }) state.items.push(...menuItems) } },
lazyloding
export default (name, index = false) => () => import(`views/${name}${index ? '/index' : ''}.vue`)
關(guān)于“使用vue-router實現(xiàn)動態(tài)權(quán)限控制的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
文章名稱:使用vue-router實現(xiàn)動態(tài)權(quán)限控制的示例分析
本文鏈接:http://bm7419.com/article26/gegscg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、定制開發(fā)、全網(wǎng)營銷推廣、網(wǎng)站排名、用戶體驗
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)