快捷導(dǎo)航

vue后臺(tái)管理之動(dòng)態(tài)加載路由的方法

更新時(shí)間：2018年08月13日 10:49:15 作者：余空啊

這篇文章主要介紹了vue后臺(tái)管理之動(dòng)態(tài)加載路由的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在這里我們將會(huì)實(shí)現(xiàn)一個(gè)vue動(dòng)態(tài)路由的案列，當(dāng)用戶登陸成功后，根據(jù)用戶的角色，拿到他對(duì)應(yīng)的菜單信息，并將它動(dòng)態(tài)的載入到我們的路由中。

我們的通用的后臺(tái)管理系統(tǒng)中，我們會(huì)根據(jù)權(quán)限的粗細(xì)不同，會(huì)對(duì)每個(gè)角色每個(gè)權(quán)限每個(gè)資源進(jìn)行控制。同樣的我們也需要實(shí)現(xiàn)一個(gè)這樣的功能。這篇文章我將主要講vue端的實(shí)現(xiàn)，關(guān)于后臺(tái)接口我就不會(huì)涉及，當(dāng)我接觸的時(shí)候我們的后臺(tái)接口是springcloud實(shí)現(xiàn)。

一、思路

在vue-router對(duì)象中首先初始化公共路由，比如（404，login）等，然后在用戶登陸成功，根據(jù)用戶的角色信息，獲取對(duì)應(yīng)權(quán)限菜單信息menuList，并將后臺(tái)返回的menuList轉(zhuǎn)換成我們需要的router數(shù)據(jù)結(jié)構(gòu)，然后通過vue-router2.2新添的router.addRouter(routes)方法，同時(shí)我們可以將轉(zhuǎn)后的路由信息保存于vuex，這樣我們可以在我們的SideBar組件中獲取我們的全部路由信息，并且渲染我們的左側(cè)菜單欄，讓動(dòng)態(tài)路由實(shí)現(xiàn)。

二、實(shí)現(xiàn)

1、公共路由定義

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'

export const constantRouterMap = [
 { path: '/login', component: () => import('@/views/login/index'), hidden: true },
 { path: '/404', component: () => import('@/views/404'), hidden: true },

 {
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  name: 'Dashboard',
  hidden: true,
  children: [{
   path: 'dashboard',
   component: () => import('@/views/dashboard/index')
  }]
 },
]
export default new Router({
 scrollBehavior: () => ({ y: 0 }),
 routes: constantRouterMap
})

2、獲取菜單信息

router.beforeEach((to, from, next) => {
 NProgress.start() // start progress bar
 if (getToken()) { // determine if there has token
  /* has token*/
  if (to.path === '/login') {
   next({ path: '/' })
   NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
  } else {
   if (store.getters.roles.length === 0) { // 判斷當(dāng)前用戶是否已拉取完user_info信息
    store.dispatch('GetInfo').then(res => { // 拉取user_info
     const roles = res.roles
     store.dispatch("GetMenu").then(data => {
      initMenu(router, data);
     });
     next()
    }).catch((err) => {
     store.dispatch('FedLogOut').then(() => {
      Message.error(err || 'Verification failed, please login again')
      next({ path: '/' })
     })
    })
   } else {
    next()
   }
  }
 } else {
  /* has no token*/
  if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單，直接進(jìn)入
   next()
  } else {
   next('/login') // 否則全部重定向到登錄頁
   NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
  }
 }
})

router.afterEach(() => {
 NProgress.done() // finish progress bar
})

在這里我們通過在router的beforeEach鉤子函數(shù) 判斷用戶是否已經(jīng)獲得角色信息，如果沒有，則請(qǐng)求后臺(tái)獲取對(duì)應(yīng)的角色信息，然后通過角色信息再次請(qǐng)求獲取對(duì)應(yīng)的菜單列表，獲取到菜單列表，然后去格式化菜單列表，使其轉(zhuǎn)換成router數(shù)組的結(jié)構(gòu)。

3、動(dòng)態(tài)加載路由

import store from '../store'

export const initMenu = (router, menu) => {
 if (menu.length === 0) {
  return
 }
 let menus = formatRoutes(menu);
 // 最后添加
 let unfound = { path: '*', redirect: '/404', hidden: true }
 menus.push(unfound)
 router.addRoutes(menus)
 store.commit('ADD_ROUTERS',menus)
}

export const formatRoutes = (aMenu) => {
 const aRouter = []
 aMenu.forEach(oMenu => {
  const {
   path,
   component,
   name,
   icon,
   childrens
  } = oMenu
  if (!validatenull(component)) {
   let filePath;
   const oRouter = {
    path: path,
    component(resolve) {
     let componentPath = ''
     if (component === 'Layout') {
      require(['../views/layout/Layout'], resolve)
      return
     } else {
      componentPath = component
     }
     require([`../${componentPath}.vue`], resolve)
    },
    name: name,
    icon: icon,
    children: validatenull(childrens) ? [] : formatRoutes(childrens)
   }
   aRouter.push(oRouter)
  }

 })
 return aRouter
}

在這里我們把menList轉(zhuǎn)換成routerList因?yàn)槲覀兒笈_(tái)返回的數(shù)據(jù)不是規(guī)范的router結(jié)構(gòu)，所以這里需要我們處理一下，如果你們后臺(tái)返回規(guī)范的就不需要處理，然后通過router.addRoutes把后臺(tái)返回的加入到我們的路由中，并且將其保存在我們的vuex中，需要主要的如果404組件一定要放在動(dòng)態(tài)路由在后載入。

4、渲染菜單

其實(shí)這里已經(jīng)不屬于我們的所講的重點(diǎn)，在這里只需要取出上一步存在vuex中的路由信息，并且將其渲染成我們的左側(cè)菜單欄就可以。在這里我們使用了element-ui。

<template>
 <el-scrollbar wrapClass="scrollbar-wrapper">
  <el-menu
   mode="vertical"
   :show-timeout="200"
   :default-active="$route.path"
   :collapse="isCollapse"
   background-color="#304156"
   text-color="#bfcbd9"
   active-text-color="#409EFF"
  >
   <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
  </el-menu>
 </el-scrollbar>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import { validatenull } from "@/utils/validate";
import { initMenu } from "@/utils/util";

export default {
 components: { SidebarItem },
 created() {
 },
 computed: {
  ...mapGetters([
   'permission_routers',
   'sidebar',
   'addRouters'
  ]),
  isCollapse() {
   return !this.sidebar.opened
  }
 }
}
</script>

就這樣我們動(dòng)態(tài)加載路由就是實(shí)現(xiàn)了，是不是很簡單，關(guān)鍵點(diǎn)就是router.addRoute方法。下面我就說一下防踩坑點(diǎn)。

三、防坑

1、關(guān)于加載菜單信息的時(shí)機(jī)

在此之前我將第二步獲取菜單信息放在我的SideBar組件的create函數(shù)中，當(dāng)時(shí)我發(fā)現(xiàn)也沒有什么問題。登錄跳轉(zhuǎn)到home界面左側(cè)菜單也成功渲染，點(diǎn)擊菜單進(jìn)入我們動(dòng)態(tài)加載的路由界面，也沒問題。但是當(dāng)我點(diǎn)擊刷新的時(shí)候問題來。頁面空白控制臺(tái)也不報(bào)錯(cuò)。當(dāng)時(shí)我就蒙蔽了，什么情況，不是好好的嘛？如果大家也遇到這種這時(shí)候大家不要著急，冷靜的分析整個(gè)流程，就會(huì)發(fā)現(xiàn)問題的所在。

1、登陸成功跳轉(zhuǎn)home界面，home組件是公共路由，存在的沒問題。

2、這時(shí)候 sidebar組件create鉤子觸發(fā)，成功獲取菜單列表

3、菜單列表轉(zhuǎn)成路由數(shù)組，并且加載到router實(shí)例中和vuex中

4、sidebar從vuex獲取到路由數(shù)組渲染菜單進(jìn)入我們動(dòng)態(tài)加載頁面中，顯示正常，這一切看起來沒什么問題

5、點(diǎn)擊瀏覽器的刷新按鈕、或者F5，頁面空白。

原因：第五步中我們我們?yōu)g覽器刷新，在spa應(yīng)用整個(gè)vue實(shí)例會(huì)重新加載，也是說我的vue-router會(huì)重新初始化，那么我們之前的動(dòng)態(tài)addRoute就不存在了，但是我們此時(shí)訪問一個(gè)不存在的頁面，所以我們的sidebar組件也就不會(huì)被訪問，那么也無法獲取菜單信息，就導(dǎo)致頁面空白。所以我們需要把加載菜單信息這一步放在router的全局守衛(wèi)beforeEach中就可以了。

2、關(guān)于404組件的位置

大家可以看到

export const initMenu = (router, menu) => {
 if (menu.length === 0) {
  return
 }
 let menus = formatRoutes(menu);
 // 最后添加
 let unfound = { path: '*', redirect: '/404', hidden: true }
 menus.push(unfound)
 router.addRoutes(menus)
 store.commit('ADD_ROUTERS',menus)
}

我強(qiáng)調(diào)了 404組件一定要放在動(dòng)態(tài)路由組件的最后，不然你刷新動(dòng)態(tài)加載的頁面，會(huì)跳轉(zhuǎn)到404頁面的。

四、效果圖