Ant-design-vue项目实现动态路由

最新推荐文章于 2024-01-25 23:42:51 发布

NMGWAP

最新推荐文章于 2024-01-25 23:42:51 发布

阅读量705

点赞数

CC 4.0 BY-SA版权

文章标签： java vue python js javascript

本文链接：https://blog.youkuaiyun.com/NMGWAP/article/details/125066856

本文介绍了在vue项目中使用Ant-design-vue实现动态路由的两种方式：前端控制路由和后端处理路由。重点讲解了公司采用的后端返回路由信息，前端动态生成路由及菜单的方法。涉及调用接口获取用户权限对应的路由信息，然后在前端进行处理并添加到路由中。

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

vue项目实现动态路由的方式大体可分为两种:
1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

2.后台传来当前用户对应权限的路由表，前端通过调接口拿到路由信息后处理(后端处理路由)

这两种方法各有优点，效果都能实现，我们公司现在用的就是第二种，后台返回路由信息，前端动态生成路由及菜单。我们就讲讲实现的逻辑。

我们用动态路由，需要后台提供路由信息，那前台肯定有对应编辑输入的地方，我们的系统放到菜单里。

父级节点        父级
节点ID          自动生成
菜单名称        菜单名称
权限标识        
图标         &

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

NMGWAP

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ant design pro动态菜单

10-08

自己写的ant design pro动态菜单，不足请指正，互相学习借鉴！

vue的国际化实现，包括ant-design-vue与自定义的实现

04-08

本篇文章将详细讲解如何在Vue项目中实现国际化，特别是结合了Ant Design Vue库的场景。首先，让我们了解基础概念。Vue的国际化插件通常使用`vue-i18n`，它提供了方便的方式来管理和切换应用中的多语言内容。`vue-...

参与评论您还未登录，请先登录后发表或查看评论

Ant Design Vue 动态路由

fearlessnesszhang的博客

03-04

2126

main.js 引入 router import router from './router' new Vue({ router, i18n, created: bootstrap, render: h => h(App) }).$mount('#app') router - index.js new Router import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import {

ant design vue input change_Ant-design-vue项目实现动态路由

weixin_39806388的博客

11-24

511

vue项目实现动态路由的方式大体可分为两种:1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)2.后台传来当前用户对应权限的路由表，前端通过调接口拿到路由信息后处理(后端处理路由)这两种方法各有优点，效果都能实现，我们公司现在用的就是第二种，后台返回路由信息，前端动态生成路由及菜单。我们就讲讲实现的逻辑。我们用动态路由，需要后台提供路由信息，那前台肯定有对应编辑输...

Ant Design Pro Vue实现动态路由和菜单的前后端分离框架

weixin_67828227的博客

01-25

971

首先可以从官网查看路由实现逻辑以及路由框架，我们要做的就是根据ant design的前端接口，给对应接口返回需要的数据即可。1. 在src/main.js下, 第14行开始注释掉mock2. 在src/utils/request.js下3. 修改store/modules/user.js 修改第37行action下第39行Login修改第53行GetInfo4. 登录部分和后端的交互api在src/api/login.js中, 如果需要修改可以在此处修改5. 在后端为前端写api。

Vue+ant-design-pro（2）动态路由

徐小硕—心之所向，素履以往

07-14

3587

ant-design-pro动态路由配置

ant-design-vue3-admin:一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板，支持响应式布局，在 PC、平板和手机上均可使用

05-19

ant-design-vue3-admin 一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板，支持响应式布局，在 PC、平板和手机上均可使用。最新的技术栈统一的技术规范权限方案（路由，菜单，操作...

基于springboot，ant-design-vue-pro的简易后台管理系统.zip

热门推荐

haiyabtx

10-17

1万+

React + TypeScript + Ant Design Pro V5.2 开箱即用的中台前端/设计解决方案。动态菜单动态路由（配置路由+动态登录路由）

react中ant.design框架配置动态路由

精通前端技术，了解后端接口

10-12

2227

动态路由是一种在Web应用程序中用于根据特定参数或条件生成路由路径的方式。与静态路由不同，动态路由的路径不是在代码中硬编码的，而是根据变量或参数的值而生成。这使得动态路由非常适合需要根据不同情况呈现内容或导航到不同页面的情况。动态路由通常使用占位符或参数来定义路由规则，这些参数在访问特定路由时会被替换为实际的数值或文本。这些参数可以是用户输入的数据、URL中的查询字符串、或从应用程序状态中提取的信息。

Ant Design Pro 动态路由的实现

黄孝果的博客

03-19

6166

提供登录与获取用户信息数据接口 import request from '@/utils/request'; /** * * @returns 首页列表权限 */ export async function queryCurrent():Promise<any>{ return request('/user/info2', { prefix:'/mock', method: 'GET', }); } 登录接口数据 {'code': 200, 'data'.

antDesign实现动态菜单+动态路由

qq_39558062的博客

12-20

3803

配置菜单路由权限有几种方式：防君子不防小人菜单栏虽然没有页面权限，但可以输入url访问没有权限的页面统统防着这就需要动态路由实现动态菜单待更新实现动态路由实现思路是使用Umi的运行时配置提供了几个方法，其中patchRender和render配置配合使用，请求服务端根据响应动态更新路由 patchRender({ routes })：用于修改路由 render(oldRender)：用于渲染之前做权限校验实现步骤 src目录下新建app.ts app.ts中重写patchRende

Ant Design Vue Pro静态路由改为动态路由

小杨很困的博客

03-14

4169

回顾一下将Ant Design Vue Pro静态路由改为动态路由。由于业务需求，需要对Ant Design Vue Pro框架的路由部分进行一个重构，首先Ant Design Vue Pro是带有两套路由的，分别需要在不同的地方进行配置，下面就来说说我开发过程中碰到的问题并如何解决的

AntDesign vue学习笔记（五）导航菜单动态加载

weixin_30555125的博客

06-28

2142

一般的后台系统都有一个树形导航菜单，具体实现如下，主要参考https://my.oschina.net/u/4131669/blog/3048416 "menuList": [ { "name": "首页", "url": "http://192.168.1.100:9999", "ic...

Ant Design Pro Vue 动态导航及动态路由实现

KevinChone的博客

05-27

3740

ant design pro vue版本，实现了动态路由(动态导航）流程详解，路由表由后端返回前端根据返回的进行路由表的拼接。

Vue3+ant-design-vue2图书管理系统开发实践

2. ant-design-vue组件库：ant-design-vue是基于Ant Design设计语言的Vue实现，提供了一套企业级的UI设计语言和Vue组件库，使得开发者能够快速构建出美观、一致、高度可定制的Vue应用程序。在本资源的开发过程中，...