vue3生成动态路由

已于 2023-11-10 09:51:31 修改
阅读量153 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-11-10 09:30:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZMMqz/article/details/134324612
版权

     前几天老板让写公司的管理网站，根据每个人的权限，当登录进来的时候显示不同的功能。所以就来复习一下动态路由。

     先做一个登录页面，根据按钮不同 获取不同的数据，在这里我设置一个按钮1，一个按钮2，点击之后表示不同权限的登录。

因为后端接口还没出来，使用mock模拟一下数据。当我点击权限一的时候获取三个功能，当我点击权限二的时候获取七个功能。

先设置一下路由配置，因为是管理端页面，所以一级路由只有home、login和404页面。所有生成的动态路由时home下面的子路由。

在untils文件夹下面写一个initRoute.js的方法，用于进行动态路由的生成。​​​​​​​

生成动态路由，第一步先将写好的路由对象引进来并配置好路由的映射关系

配置完成后接下来就可以进行路由的添加

resdata是我们调用这个方法时往里面传入的值，现在我们就可以在LoginView页面当用户登录完成后将后端返回的数据传给initRoute方法就可以生成动态路由了。因为要解决页面刷新路由丢失的问题，所以将拿到的数据存储到localStorage里面

现在解决刷新页面后路由丢失的问题，解决方法也很简单，在main.js里面重新调用一下initRoute方法就可以了。

到此动态生成路由就已经完成了

ZMMqz
关注
vue 动态显示三级路由
Start2019
09-09 1万+
无需vuex、本地存储写路由面包屑。 已确定路由中包含3级菜单，如果有3级菜单，在点击二级菜单的时候，在面包屑中将该二级菜单下所有的3级菜单都显示出来；如果是一级菜单没有子菜单，或者只有二级菜单，那么面包屑中就显示一级菜单名称或二级菜单名称。
还在手写路由？Vue3 可以自动生成路由啦！
LuckyWinty的博客
08-20 188
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群在 Vue3 开发中，路由管理一直是项目结构中的重要组成部分。传统的路由配置方式需要手动编写每个路由的配置信息，这在页面众多的大型项目中显得尤为繁琐。今天，我们将介绍一个能够自动化生成 Vue3 路由的插件 —— unplugin-vue-router。它将大幅提升你的开发效率！unplugin-vue-router 简介unplugin-...
如何在vue3中实现动态路由
程序员柚子的博客
07-06 1909
如何快速建立vue3动态路由
动态添加的路由 直接访问_Vue3动态添加路由及生成菜单
weixin_42510962的博客
01-11 4904
前面讲了Vue2项目中动态添加路由及生成菜单，今天尝试在Vue3中动态添加路由及生成菜单。最近在尝试用Vue3开发个管理平台项目，一切都是从头开始，基本框架搭建，熟悉Vue3写法，编写登录页，编写路由守卫，上面功能已基本完成，开始编写首页布局，用Vue3就必须用Router4.x版本，所以之前的代码迁移过来之后发现，动态路由不生效，查了很多资料，最后发现，Router4中，去掉了 rou...
vue3+vue-cli实现动态路由
qq_48666244的博客
02-06 451
编写一个路由配置表，不同的URL对应不同的组件。提供一个路由占位，用来挂载URL匹配到的组件。MyProfile组件。
VUE3动态路由
sea2333的博客
04-29 996
vue3动态路由
Vue3 可以自动生成路由了！
最新发布
lsq191690的博客
08-30 1265
在Vue3开发中，路由管理一直是项目结构中的重要组成部分。传统的路由配置方式需要手动编写每个路由的配置信息，这在页面众多的大型项目中显得尤为繁琐。今天，我们将介绍一个能够自动化生成Vue3路由的插件 ——。它将大幅提升你的开发效率！是一个构建时的插件，它能够基于你的Vue组件文件自动生成路由配置。这意味着你不再需要手动编写冗长的路由配置代码，只需按照约定创建组件文件，路由就会自动配置好。虽然提供了强大的自动路由功能，但在某些情况下你可能需要添加自定义路由。你可以通过扩展自动生成的routes。
Vue 动态添加路由及生成菜单的方法示例
12-12
动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍： router.addRoutes router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组...
Vue Router 实现动态路由和常见问题及解决方法
01-21
如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种： 前端将全部路由规定好，登录时根据用户角色权限来动态展示路由； 路由存储在数据库中，前端通过接口获取当前用户对应路由列表并进行...
vue 实现动态路由的方法
11-19
使用Vuex等状态管理库来存储动态生成的路由，这样在路由守卫中可以直接获取和修改这些数据。 通过以上步骤，你就可以在Vue项目中实现动态路由了。这不仅有助于权限控制，还能使得路由配置更加灵活，适应各种复杂的...
Vue3.x动态路由、命名路由和编程式导航
xjx0121的博客
10-16 679
两种方法 ： 1.路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名（path: 'apple/:mid'），通过{{ $route.params.mid }}进行接收 2.声明属性props:true，选项，以props的形式接收动态路由中的参数 2.编程式导航 this.$router.push() --- 通过匹配path路径进行条装 this.$router.go(-1) --- 返回上一级
vue动态路由配置及路由传参的方式
12-10
动态路由： 　当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个”共用”的组件，并且还要传参数，渲染不同的数据 　这就要用到动态路由跟路由传参了！ ...
vue3动态添加路由
一株木樨的博客
08-24 4032
vue3动态添加路由
vue3动态路由+菜单栏的实现示例
菜鸟教程
05-09 2170
动态添加路由只要提前定义好服务器数据，约定好格式，做起来还是很简单的。只要能根据component字段正确的导入组件就没什么大问题，不过这只是一个简单的示例，实际开发还是有很多情况要处理的。到此这篇关于vue3动态路由+菜单栏的实现示例的文章就介绍到这了,更多相关vue3动态路由+菜单栏内容请搜索网赚博客https://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客https://www.piaodoo.com/！
Vue 动态添加路由及生成菜单
hsany330的专栏
05-06 967
写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。 为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。 在网上找了好多资料，终于想到了解决办法。 动态生成路由 利用 vue-router 的addRoutes方法可以动态添加路由。 先看一下官方介绍： router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则。参数必须是一个符合routes选...
Vue3.0+ts+vite动态路由配置
weixin_44110728的博客
03-18 6421
Vue3.0+ts+vite动态路由配置
Vue3动态路由 - 动态添加菜单权限路由以及next
qq_18196779的博客
05-11 3397
根据登录用户拥有的菜单权限，动态添加菜单路由... , next({ ...to, replace: true })`主要是解决了刷新后导致白屏的问题...
vue3如何实现动态路由
weixin_59244784的博客
01-03 2026
vue3如何实现动态路由
vue3 生成动态路由
09-09
在 Vue 3 中生成动态路由可以通过路由的 `params` 或 `query` 参数来实现。下面是一个示例： 1. 首先，在路由配置中定义动态路由的占位符，例如： ```javascript const routes = [ { path: '/user/:id', name: 'User', component: UserComponent } ]; ``` 2. 然后，在组件中获取参数，并根据参数渲染不同的内容： ```javascript <template> <div> <h1>User Page</h1> <p>User ID: {{ $route.params.id }}</p> </div> </template> <script> export default { name: 'UserComponent', mounted() { // 获取动态路由参数 const userId = this.$route.params.id; // 根据参数请求数据或执行其他逻辑 // ... } } </script> ``` 在上面的示例中，当访问 `/user/123` 路径时，`$route.params.id` 的值将为 `123`，你可以根据需要获取参数值并执行相应的逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值