Vue菜单和权限配置教程：使用代码实现动态路由控制

Vue 的菜单和权限配置可以通过路由来实现，具体步骤如下：

在 router 文件夹下新建一个 menu.js（菜单配置文件）和 permission.js（权限配置文件）。
在 menu.js 文件中定义菜单路由，例如：

const menuRoutes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: { title: '首页', icon: 'el-icon-s-home' }
  },
  {
    path: '/user',
    name: 'User',
    component: User,
    meta: { title: '用户管理', icon: 'el-icon-user', roles: ['admin'] }
  },
  ...
]

其中，meta 属性用来定义菜单的标题、图标等信息，roles 属性用来定义该菜单需要的权限角色。

在 permission.js 文件中定义权限路由，例如：

const whiteList = ['/login', '/auth-redirect']

router.beforeEach(async(to, from, next) => {
  NProgress.start()
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          const { roles } = await store.dispatch('user/getInfo')
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

其中，whiteList 数组中定义了不需要进行权限判断的页面，如登录页面等。在 beforeEach 钩子函数中，判断用户是否已经登录（即是否有 token），如果已经登录则判断用户是否有权限访问该页面，如果没有则动态生成该用户的权限路由并添加到 router 中，然后再跳转到该页面。

在 main.js 文件中引入 menu.js 和 permission.js，并注册路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { menuRoutes } from './router/menu'
import { permissionRoutes } from './router/permission'

Vue.config.productionTip = false

router.addRoutes(menuRoutes)
router.beforeEach(permissionRoutes)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在这里，通过 addRoutes 方法将菜单路由添加到 router 中，通过 beforeEach 方法将权限路由添加到路由跳转前进行判断。

以上就是 Vue 的菜单和权限配置的基本流程和代码展示。