vue系列之动态路由详解【原创】

import Vue from 'vue'
import router from './router'
import { asyncRouterMap, constantRouterMap } from './router'
 
function hasPermission(roles, route) { //
 if (route.meta && route.meta.role) {
  return roles.some(role => role === route.meta.role)
 } else {
  return true
 }
}

function filterAsyncRouter(asyncRouterMap, roles) {

 const aessedRouters = asyncRouterMap.filter(route => {
  if (hasPermission(roles, route)) {
   if (route.children && route.children.length) {
    route.children = filterAsyncRouter(route.children, roles)
   }
   return true
  }
  return false
 })

 return aessedRouters
}

// 加载页面之前
router.beforeEach((to, from, next) => {
 NProgress.start() // 开启Progress
 if (to.path == '/ContractAduit/Error') {
  next()
 } else if (!Vue.prototype.hasRoute) {

  Vue.prototype.$ajax.get(Vue.prototype.$api.getModuleHost("用户信息接口地址"), {})
   .then(data => {
    if (data.code == 1000) {
     let menus = data.menu
     let roles = menus.map((menu, index) => {
      return parseInt(menu.url);
     })
     const aessedRouters = filterAsyncRouter(asyncRouterMap, roles)
     router.addRoutes(aessedRouters)
     Vue.prototype.userInfo = {
      id: data.id,
      realname: data.realname
     }
     Vue.prototype.hasRoute = true;
     next({...to })
    } else {
     router.push({ name: 'ErrorPageRouter' });
    }
   })
   .catch(err => console.log(err))
 } else {
  next()
 }
});

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

Vue.use(Router)

export const constantRouterMap = [{
  path: '/404',
  name: 'NoFoundPagetRouter',
  ponent: require('../views/404.page'),
  meta: {
   title: '404',
  }
 },
 {
  path: '/ContractAduit/NoAess',
  name: 'NoAessPageRouter',
  ponent: require('../views/no-aess.page'),
  meta: {
   title: '无权限',
  }
 },
 {
  path: '/ContractAduit/Error',
  name: 'ErrorPageRouter',
  ponent: require('../views/error.page'),
  meta: {
   title: '内部错误',
  }
 }
]

export default new Router({
 mode: 'history',
 routes: constantRouterMap
})

export const asyncRouterMap = [{ 
  path: '/ContractAduit/Supplier/List',
  name: 'SupplierListPageRouter',
  ponent: require('../views/supplier/supplier-list.page.vue'),
  meta: {
   title: '某某列表页',
   role: 10001
  }
 },
 ...
 {
  path: '/',
  redirect: '/ContractAduit/Supplier/List',
  hidden: true,
  meta: {
   title: '某某列表页',
   role: 10001
  }
 }, {
  path: '',
  redirect: '/404',
  hidden: true
 }
]