简单实现一个权限路由

首先是router/index.js文件，我们在这里定义我们的RouterPlugin插件

// router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import RouterPlugin from './routerPlugin'
// 通用路由（不需要权限）
import PageRouter from './pages/'

Vue.use(Router)

export const createRouter = () =>
  new Router({
    mode: 'history',
    routes: [...PageRouter],
  })

const router = createRouter()

// 实例化router后初始化RouterPlugin插件
RouterPlugin.install(Vue, {
  router,
})

// 重置路由权限
export function resetRouter() {
  const newRouter = createRouter()
  Router.matcher = newRouter.matcher // reset router
  RouterPlugin.install(Vue, {
    router: Router,
  })
}

export default router

接下来是routerPlugin的定义，在router/routerPlugin.js文件夹里

// router/routerPlugin插件
// 其实代码很简单，定义也差不多，就是多了filePath这个字段，用来获取路由对应文件的路径

let RouterPlugin = function () {
  this.$router = null
}

// 默认菜单（示例）
// 一般是后端返回，所以要先和后端确认好返回格式
const defaultMenus = [
  {
    name: 'Admin',
    path: '/admin',
    filePath: 'layout/admin/index',
    redirect: 'admin/testPage/index',
    children: [
      {
        name: 'TestPage',
        path: 'testPage/index',
        filePath: 'views/testPage/index',
        meta: {},
      },
      {
        name: 'TestPageEdit',
        path: 'testPage/edit',
        filePath: 'views/testPage/edit',
        meta: {},
      },
    ],
  },
]

RouterPlugin.install = function (Vue, option = {}) {
  this.$router = option.router

  // 在router实例上添加_routerPlugin对象
  this.$router._routerPlugin = {
    safe: this,
    formatRoutes: function (menus = defaultMenus, first = true) {
      if (!menus.length) return
      const menuRoutes = []
      menus.forEach((menu) => {
        const menuRoute = {
          name: menu.name,
          path: menu.path,
          meta: menu.meta,
          redirect: menu.redirect,
          component: (resolve) => require([`@/${menu.filePath}`], resolve),
          children: menu.children ? this.formatRoutes(menu.children, false) : [],
        }
        menuRoutes.push(menuRoute)
      })
      // 因为有递归调用的情况
      // 用first字段做区分
      if (first) {
        this.safe.$router.addRoutes(menuRoutes)
      } else {
        return menuRoutes
      }
    },
  }
}

export default RouterPlugin

现在我们只有formatRoutes方法用来处理权限路由，至于拆出来这么写是为了方便以后有其它功能的话方便扩展，看自己项目情况使用

接下来就可以在获取权限路由后直接调用

this.$router._routerPlugin.formatRoutes()

这个方法来实现权限路由动态加载