Vue前端动态路由权限配置_前端动态路由配置-CSDN博客

本文链接：https://blog.csdn.net/qq_45637995/article/details/127859731

本文详细介绍了Vue.js中动态路由的配置方法，包括半动态配置和纯动态配置。重点讲解了纯动态配置的实现步骤，涉及Vuex状态管理、组件渲染以及使用beforeEach路由守卫动态添加路由。此外，还提供了多层级动态路由配置的递归解决方案，确保了复杂路由场景的适应性。

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

- 在我的使用中，我把动态路由以下分为两种方案。按项目需求选取。

1.半动态配置

：较适合c端，根据用户等级，可体验产品不同功能。

-前端分好权限，把路由配置写死，后端返回该用户的角色之后，前端动态添加该角色有拥有权限的路由即可。（前后端交流较少）

2.纯动态配置

：较适合后台管理系统，上级管理员给下级管理赋权各个层级页面。

-所有配置都由后端返回告知，前端动态渲染组件并配置路由。（前后端交流较多，返回的项目文件名称需交流清除）

实现：

- 方案一较为简单，这里只讲述方案二纯动态配置。

0.后端返回的数据

const nav=[{
  path:'/demo1',
  name:'demo1',
  component:'demo1',
  meta:{
    title:'一级路由demo1'
  },
  children:[
    {
      path:'/demo2',
      name:'demo2',
      component:'demo2',
      meta:{
        title:'二级路由demo2'
      },
    }

  ]
},{
  path:'/demo3',
  name:'demo3',
  component:'demo3',
  meta:{
    title:'一级路由demo3'
  },
  children:[
    {
      path:'/demo4',
      name:'demo4',
      component:'demo4',
      meta:{
        title:'一级路由demo4'
      },
    }
  ]
},]

1.Vuex设置缓存

缓存常选用vuex的原因：vuex相较于本地存储具有响应式的作用，vuex不直接暴露出来，安全性高。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isnav:false, //标记是添加了动态路由
  },
  getters: {
  },
  mutations: {
    setnav(state)
    {
      state.isnav = true
    }
  },
  actions: {
  },
  modules: {
  }
})

2.组件渲染

用element-ui简单渲染出来

<template>
  <div>
    这里是home
    <hr/>
    <el-menu  class="el-menu-vertical-demo"  >
      <el-submenu index="1" v-for="item in nav" :key="item.path">
        <template slot="title" >
          <