vue addRoutes实现动态权限路由菜单的示例

Vue.js是一个流行的开放性JavaScript框架，允许开发人员创建可复杂单页面应用程序（SPA）。Vue.js基于一种虚拟DOM架构，使其易于操作和高效渲染。Vue.js也支持路由功能，其中动态路由和异步组件加载等功能。

在Vue.js中，可以通过使用vue-router插件来实现路由功能。通过router实例可以描述应用程序，包括URL路径与对应的组件。但是，在一些应用程序中，需要动态生成一些路由，以及基于用户角色决定指定路由是否显示。vue addRoutes()是一种用于动态添加路由的方法，可以满足这些需求。

在本文中，我们将演示如何使用vue addRoutes()实现一个动态权限路由菜单。

1. 安装vue-cli，并初始化应用程序

在开始之前，需要安装Vue CLI并初始化一个基本的应用程序。 你可以参考Vue CLI的文档来了解如何安装并初始化应用程序。

2. 添加路由和菜单

在初始化应用程序后，我们需要添加路由和菜单。假设我们的应用程序需要根据一些用户角色来显示不同的菜单，并且在给定用户角色的情况下，要显示相应的路由。我们可以以以下方式定义路由和菜单。

在router.js文件中，我们可以定义一个默认路由(即用户未登录)，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export const constantRouterMap = [
  {
    path: '/',
    component: Home,
    hidden: true
  },
  {
    path: '/login',
    component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import(/* webpackChunkName: "404" */ './views/404.vue'),
    hidden: true
  }
]

在此基础上，我们可以添加一些动态路由，如下所示：

export const asyncRouterMap = [
  {
    path: '/dashboard',
    component: Layout,
    redirect: '/dashboard/index',
    children: [{
      path: 'index',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { role: ['admin']}
    }]
  },
  {
    path: '/user',
    component: Layout,
    redirect: '/user/list',
    name: 'User',
    meta: { role: ['admin'] },
    children: [
      {
        path: 'list',
        name: 'List',
        component: () => import('@/views/user/list'),
        meta: { role: ['admin'] }
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

我们可以看到，上面的路由和菜单表示了一个很简单的应用程序，其中包含两个页面(仪表板和用户列表)。这两个页基于“管理员”角色，对于其他角色都是隐藏的。

3. 实现动态加载路由

我们已经定义好了路由和菜单，接下来，我们需要实现基于用户角色的路由动态加载。这可以通过使用Vue.js提供的异步组件和Webpack进行实现。

我们需要定义一个vue-router实例，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap, asyncRouterMap } from './router.config'

Vue.use(Router)

const createRouter = () => new Router({
  mode: 'history', 
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

const router = createRouter()
export default router

export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher 
}

router.beforeEach((to, from, next) => {
  let token = getToken()
  if (!token && to.path !== '/login') {
    next('/login')
  } else if (to.path !== '/login') {
    let role = getRole()
    let accessRoutes = filterRoutes(asyncRouterMap, role)
    resetRouter()
    router.addRoutes(accessRoutes)
    next({ ...to, replace: true })
  } else {
    next()
  }
})

在上面的代码中，我们首先定义了常量路由和异步路由。然后，我们将这些路由添加到vue路由实例中。在添加路由之前，我们可以检查用户是否已登录，并根据用户角色筛选异步路由。接下来，我们需要重置路由实例，以便将新增的路由添加到路由器中。最后，我们可以通过调用next()方法来导航到新的路由。

4. 使用Vue.js的路由钩子函数控制菜单项

我们已经定义了路由和菜单，以及程序如何动态加载路由。现在，我们需要控制菜单项是否显示。这可以通过在Vue.js的路由钩子函数beforeEach()中实现。根据用户角色确定路由权限后，我们可以设置meta属性来控制菜单的显示和隐藏。

在上面的代码中，我们已经在asyncRouterMap中定义了路由，其中我们还设置了meta属性，如下所示：

path: '/dashboard',
component: Layout,
redirect: '/dashboard/index',
children: [{
  path: 'index',
  name: 'Dashboard',
  component: () => import('@/views/dashboard/index'),
  meta: { role: ['admin']}
}]

我们可以通过访问meta属性来显示或隐藏菜单，如下所示：

router.beforeEach((to, from, next) => {
  let token = getToken()
  if (!token && to.path !== '/login') {
    next('/login')
  } else if (to.path !== '/login') {
    let role = getRole()
    let accessRoutes = filterRoutes(asyncRouterMap, role)
    resetRouter()
    router.addRoutes(accessRoutes)
    setMenu(accessRoutes)
    next({ ...to, replace: true })
  } else {
    next()
  }
})

function setMenu (accessRoutes) {
  let menu = []
  accessRoutes.forEach(route => {
    if (route.hidden === false) {
      const menuItem = {
        path: route.path,
        icon: route.meta.icon,
        title: route.meta.title
      }
      menu.push(menuItem)
    }
  })
  store.commit('SET_MENU', menu)
}

可以看到，在beforeEach()中，当用户登录并且具有足够的权限时，我们可以遍历routes数组并设置相应的meta属性。在setMenu()中，我们使用在路由钩子函数中获取的路由访问数组，遍历路由并将菜单项添加到菜单数组中。最后，我们将菜单项设置到Vuex store中，以在应用程序的其他部分中使用。

综上，我们在Vue.js中通过使用vue addRoutes()实现了一个动态权限路由，其中仅显示适当用户角色的路由。我们还修改了Vue.js的路由钩子函数，在设置meta属性的同时控制菜单的显示和隐藏，并将其添加到应用程序的菜单中。