Vue实现动态路由菜单配置_vue 路由菜单排序-优快云博客

本文链接：https://blog.youkuaiyun.com/Deku_Ln/article/details/112238276

本文介绍了如何在Vue应用中利用addRoute方法实现动态路由菜单配置。通过结合后端权限控制，将路由信息存储在数据库中，并在前端提供菜单管理界面进行配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在这里插入图片描述

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

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' })