vue后臺管理之動態加載路由的方法

2019-11-19 13:16:39

字體：大中小

來源：轉載

供稿：網友

在這里我們將會實現一個vue動態路由的案列，當用戶登陸成功后，根據用戶的角色，拿到他對應的菜單信息，并將它動態的載入到我們的路由中。

我們的通用的后臺管理系統中，我們會根據權限的粗細不同，會對每個角色每個權限每個資源進行控制。同樣的我們也需要實現一個這樣的功能。這篇文章我將主要講vue端的實現，關于后臺接口我就不會涉及，當我接觸的時候我們的后臺接口是springcloud實現。

一、思路

在vue-router對象中首先初始化公共路由，比如（404，login）等，然后在用戶登陸成功，根據用戶的角色信息，獲取對應權限菜單信息menuList，并將后臺返回的menuList轉換成我們需要的router數據結構，然后通過vue-router2.2新添的router.addRouter(routes)方法，同時我們可以將轉后的路由信息保存于vuex，這樣我們可以在我們的SideBar組件中獲取我們的全部路由信息，并且渲染我們的左側菜單欄，讓動態路由實現。

二、實現

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) { // 判斷當前用戶是否已拉取完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) { // 在免登錄白名單，直接進入   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鉤子函數判斷用戶是否已經獲得角色信息，如果沒有，則請求后臺獲取對應的角色信息，然后通過角色信息再次請求獲取對應的菜單列表，獲取到菜單列表，然后去格式化菜單列表，使其轉換成router數組的結構。

3、動態加載路由

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轉換成routerList因為我們后臺返回的數據不是規范的router結構，所以這里需要我們處理一下，如果你們后臺返回規范的就不需要處理，然后通過router.addRoutes把后臺返回的加入到我們的路由中，并且將其保存在我們的vuex中，需要主要的如果404組件一定要放在動態路由在后載入。

4、渲染菜單

其實這里已經不屬于我們的所講的重點，在這里只需要取出上一步存在vuex中的路由信息，并且將其渲染成我們的左側菜單欄就可以。在這里我們使用了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>

就這樣我們動態加載路由就是實現了，是不是很簡單，關鍵點就是router.addRoute方法。下面我就說一下防踩坑點。

三、防坑

1、關于加載菜單信息的時機

在此之前我將第二步獲取菜單信息放在我的SideBar組件的create函數中，當時我發現也沒有什么問題。登錄跳轉到home界面左側菜單也成功渲染，點擊菜單進入我們動態加載的路由界面，也沒問題。但是當我點擊刷新的時候問題來。頁面空白控制臺也不報錯。當時我就蒙蔽了，什么情況，不是好好的嘛？如果大家也遇到這種這時候大家不要著急，冷靜的分析整個流程，就會發現問題的所在。

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

2、這時候 sidebar組件create鉤子觸發，成功獲取菜單列表

3、菜單列表轉成路由數組，并且加載到router實例中和vuex中

4、sidebar從vuex獲取到路由數組渲染菜單進入我們動態加載頁面中，顯示正常，這一切看起來沒什么問題

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

原因：第五步中我們我們瀏覽器刷新，在spa應用整個vue實例會重新加載，也是說我的vue-router會重新初始化，那么我們之前的動態addRoute就不存在了，但是我們此時訪問一個不存在的頁面，所以我們的sidebar組件也就不會被訪問，那么也無法獲取菜單信息，就導致頁面空白。所以我們需要把加載菜單信息這一步放在router的全局守衛beforeEach中就可以了。

2、關于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)}

我強調了 404組件一定要放在動態路由組件的最后，不然你刷新動態加載的頁面，會跳轉到404頁面的。

四、效果圖