前端动态加载后端获取的路由

最新推荐文章于 2023-09-21 14:57:46 发布

木易--杨

最新推荐文章于 2023-09-21 14:57:46 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端 javascript json

本文链接：https://blog.csdn.net/weixin_50756063/article/details/130338843

本文介绍如何在前端应用中实现动态加载，通过与后端交互获取JSON格式的路由配置，实现灵活的路由管理。permission.js是核心文件，负责处理从服务器获取的路由数据并动态加载相关模块。

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

permission.js

import {
   
    constantRoutes } from '@/router'
import {
   
    getRouters } from '@/api/menu'
import Layout from '@/layout/index'
import ParentView from '@/components/ParentView';

const permission = {
   
   
  state: {
   
   
    routes: [],
    addRoutes: [],
    sidebarRouters: []
  },
  mutations: {
   
   
    SET_ROUTES: (state, routes) => {
   
   
      state.addRoutes = routes
      state.routes = constantRoutes.concat(routes)
    },
    SET_SIDEBAR_ROUTERS: (state, routers) => {
   
   
      state.sidebarRouters = constantRoutes.concat(routers)
    },
  },
  actions: {
   
   
    // 生成路由
    GenerateRoutes({
   
    comm