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

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 accessedRouters = asyncRouterMap.filter(route => {
if (hasPermission(roles, route)) {
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, roles)
}
return true
}
return false
})

return accessedRouters
}

// 加载页面之前
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 accessedRouters = filterAsyncRouter(asyncRouterMap, roles)
router.addRoutes(accessedRouters)
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()
}
});

route.js文件如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const constantRouterMap = [{
  path: '/404',
  name: 'NoFoundPagetRouter',
  component: require('../views/404.page'),
  meta: {
   title: '404',
  }
 },
 {
  path: '/ContractAduit/NoAccess',
  name: 'NoAccessPageRouter',
  component: require('../views/no-access.page'),
  meta: {
   title: '无权限',
  }
 },
 {
  path: '/ContractAduit/Error',
  name: 'ErrorPageRouter',
  component: require('../views/error.page'),
  meta: {
   title: '内部错误',
  }
 }
]
export default new Router({
 mode: 'history',
 routes: constantRouterMap
})
export const asyncRouterMap = [{
  path: '/ContractAduit/Supplier/List',
  name: 'SupplierListPageRouter',
  component: 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								 
 2/3   首页 上一页 1 2 3 下一页 尾页