這篇文章將為大家詳細講解有關(guān)使用vue-router實現(xiàn)動態(tài)權(quán)限控制的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

10年積累的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有汝城免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

使用vue開發(fā)帶權(quán)限管理系統(tǒng)，尤其是采用了vue-router做路由，很多人都遇到的一個問題就是如何動態(tài)加載路由path對應的component。

典型的應用場景就是：前端菜單不靜態(tài)的寫在vue程序里，而是要從后臺程序和數(shù)據(jù)庫返回的菜單來動態(tài)加載到vue應用中。

網(wǎng)上很多問權(quán)限的問題，但幾乎找不到很好的解決答案，在很長一段時間里，非常打擊使用vue技術(shù)棧開發(fā)的信心。問題是：

1）登錄之后跳轉(zhuǎn)到首頁，此時路由已經(jīng)是加載完成的了不能更改，菜單可以顯示但是沒有路由。

2）前端應用人為刷新網(wǎng)頁路由產(chǎn)生某些問題。

本文即在這篇文章的基礎(chǔ)上對這兩個問題解決，以使其完整。

前提是認真拜讀上面提到的那篇文章，下面直接用代碼說話:

問題1的解決思路：

登錄之后跳轉(zhuǎn)到首頁，router是vue應用的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://chinadenli.net/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)