Vue实现动态路由菜单配置

这里感谢router新加的addRoute(route:Array)方法，让我们可以进行相关的路由权限的配置。
路由的权限配置这里我介绍一下结合后端的方法。

1. 首先我们需要对于路由信息进行数据库的存储，通过后端进行路由的权限控制
2. 在前端添加一个菜单管理的界面来让我们可以在前端进行路由的相关配置信息

const router = new Router({
   
  mode: 'hash',
  scrollBehavior: () => ({
    y: 0 }),
  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
  routes: globalRoutes.concat(mainRoutes)  // 全局路由拼接动态路由
})
 // 在路由跳转前进行判断
router.beforeEach((to, from, next) => {
   
  // 添加动态(菜单)路由
  // 1. 已经添加 or 全局路由, 直接访问
  // 2. 获取菜单列表, 添加并保存本地存储
  let token = Vue.cookie.get('token')
  // 这里定义一个动态路由的属性用来判断是否已经添加
  if (router.options.isAddDynamicMenuRoutes || routerType(to) === 'global') {
   
    next()
  } else {
   
    if (!token || !/\S/.test(token)) {
   
      next({
    name: 'login'