vue路由动态获取

最新推荐文章于 2024-07-02 10:45:26 发布
最新推荐文章于 2024-07-02 10:45:26 发布
阅读量2.1k 收藏 6
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhlYYY/article/details/110689097
版权

如何获取动态路由

1、将所有的路由全部写死在router.js中，如图
在这里插入图片描述

2、但是我们需要一个标记来记录本次登录的账号需要展示哪些路由，于是便在meta的对象中加入了一个键值，键名统称为module，值的话我们需要在登录的时候获取后端权限接口来标记。
图一（前端写法）
图二 （后端返回数据）
在这里插入图片描述
在这里插入图片描述
3、万事俱备只欠东风啦，当我们有了所有的路由，以及当前用户的权限，那么接下来我们就需要对数据进行处理了，找出当前用户具备权限的路由
（该数据是在store中请求处理和存储的）

首先：在strore/modules/user.js文件中引入router.js
在这里插入图片描述
再者：获取到权限数据过滤当前用户的路由权限
在这里插入图片描述
（以下两张图是上面图内用到的过滤权限路由的方法和第一次跳转的路径获取方法）
在这里插入图片描述
在这里插入图片描述
数据处理完了，那么接下来只需要渲染啦
在这里插入图片描述
在这里插入图片描述
当然我们也需要注意的是，我们把路由存在store中，会存在一个问题，当页面强制刷新的时候，store的数据就会不存在了这时我们需要在permission.js中做一些处理
在这里插入图片描述
最后当我们退出的时候要重置路由（同样的退出方法也写在store/module/user.js中）
先引入写在router.js的重置方法
在这里插入图片描述
（router.js的充值方法）
在这里插入图片描述
最后退出方法中直接调用resetRouter()就行了
（该动态获取路由是基于vue-element-admin上实现的）

zhlYYY
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现动态路由
无所谓^_^博客
03-23 1万+
动态添加路由。说着好像很简单，但看了很多教程，也跟着教程写了很多代码，但最后都跑不通（很多原因，比如：版本问题，教程没有全部代码，只有核心代码片段等）。😭😭😭所以，我只能狠下心，写下这篇博客，方便自己总结，也为了避免大家踩坑。废话不多说，
【Vue.js】路由基础-动态路由、嵌套路由、编程式导航、重定向
LuWeien的博客
03-02 7470
当我们点击outer-link的时候路由就发生改变了，然后就会去路由表里面找对映的是哪个path，找到对应的path就去找对应的组件，将对应的组件放入router-view里面。这里的vue3是通过CDN方式引入, 由于地址在国外可能会比较慢, 可以将代码复制到本地去引入, 注意这个网站有的cdn使用不了(可以往下找使用旧一点版本)这个网站里面有大量的国内镜像资源, cdn是内容分发网络, 可以进入网站直接复制链接浏览器打开将源码复制下来在本地使用, 和vue的本地引入是一样的道理。
dynamicRouter:vue的动态路由实现方式(从后台接口获取动态路由，并生成左侧菜单)
05-02
先驱者 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。 动态路由器
Vue Router 动态路由：深入解析与实践
最新发布
My_wife_QBL的博客
07-02 1630
动态路由是指路由路径中包含动态参数的部分，这些参数可以在运行时根据不同的值加载不同的组件。动态路由使得 URL 更加灵活，能够根据用户的操作或应用的状态动态地改变。
Vue动态路由
MW
12-20 306
动态路由 在router文件中先定义路由 import Vue from 'vue' import VueRouter from 'vue-router' //主页 import Home from '../views/Home' //详情 import Detail from "@/views/Detail/Detail"; Vue.use(VueRouter) //注册模块 const routes = [ { path:'/', redirect:'/home'// 重定向
Vue Router 动态路由
qq_40930841的博客
04-30 2489
动态路由是一种路径不固定的路由，路径中可变的部分被称为动态路径参数），使用动态路径参数可以提高路由规则的可复用性。在VueRouter的路由路径中，使用“参数名”的方式可以在路径中定义动态路径参数。:id', component: 组件 }]其中:id是动态路径参数，id为参数名。（注意：不同动态路径参数的动态路由在进行切换时，由于它们都是指向同一组件，所以Vue不会销毁再重新创建这个组件，而是复用这个组件。
关于vue-router中动态路由如何获取的问题
gkkkkkkkkkkd的博客
12-06 1829
关于vue-router中动态路由如何获取的问题
vue 实现动态路由的方法
11-19
在Vue.js应用中，动态路由是一种非常实用的功能，它允许我们根据不同的条件或者从服务器获取的数据来决定应该显示哪个组件。这种技术常用于权限管理，确保用户只能访问他们被授权的页面。以下是如何在Vue中实现动态...
vue 动态路由
01-20
其中 `{{$route.params.userId}}` 是 Vue Router 提供的数据绑定，它将从当前激活的路由中获取 `userId` 参数，并将其值渲染到页面上。`export default` 部分定义了组件的基本信息，包括其名称 `name: User`，这在...
vue addRoutes路由动态加载操作
10-14
Vue.js的路由管理库`vue-router`允许开发者在运行时动态添加路由，这对于实现权限控制、根据用户角色展示不同路由非常有用。`addRoutes`方法就是动态加载路由的关键，它使得我们可以在应用启动后或者某些特定事件...
vue获取当前激活路由的方法
08-27
"Vue 获取当前激活路由的方法" Vue.js 中获取当前激活路由的方法是非常重要的一项技术，今天我们将详细介绍如何获取当前激活路由的方法。 首先，我们需要了解什么是 Route 对象。在 Vue.js 中，Route 对象是指当前...
Vue的动态路由
Fairy的博客
12-16 470
我对vue中Router的解释，可以到https://blog.csdn.net/Gbing1228/article/details/103556607了解 一、什么是动态路由？ 例如：点击不同的歌手进入到不同的歌手详情页 虽然每个请求的id不同，但是都会导航到同一个组件中，在配置路由的时候就不能写死。在vue-router中，动态路由由“：”开头。 <router-link t...
VueRouter动态获取路由
qq_40526866的博客
02-16 1751
在某些情况下，一个页面的path路径可能不确定，如果我们要进入用户界面时，希望是： /user/zhangsan 或者 /user/lisi 除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式) { path: '/user/:id', component: User } <div> <h2>{{ $route.params.id }}</h2> </
vue动态获取路由，动态添加路由
v_loading的博客
08-09 1787
后端返回路由数组，前端生成router。 #登录时获取路由，或者接口返回路由。 login.index async handleLogin() { let res = await postUserLogin(this.loginForm); // console.log(res); if (res.status == 200) { localStorage.setItem("token", res.token); localSt
VUE 动态路由
weixin_43996061的博客
01-23 468
动态添加路由的方法 添加 报错页面组件的动态路由 格式化路由
vue动态路由
涛涛的博客
10-16 144
vue-router 动态路由 有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url /item/1 /item/2 /item/3 ... 我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理 ... { path: '/item/:itemId', name: 'item', component: Item } ... 其中 :itemId 表示匹配的 ur
Vue.js：Vue-Router动态路由从服务器接口获取路由数据
彭世瑜的博客
03-28 4535
用户可以添加新的分类，分类和路由的显示方式一致，拥有和路由相同的逻辑，故而采用通过服务端返回数据生成动态路由的方式解决。既然是动态路由，所以需要响应式，当路由数据发生变化时，可以及时的获取通知。页面上显示的时候，需要从vuex获取路由信息，可以及时刷新页面数据。通过服务端接口返回的数据生成路由，是异步返回的数据，动态添加。可以通过Vue-Router提供的api，动态添加路由数据。动态路由首次跳转的时候，动态路由还没有添加，需要转换处理。该接口获取的路由数据是一维数组，和路由配置格式不一样。
Vue3 - 实现动态获取菜单路由和按钮权限控制指令
iotjin的专栏
09-21 1519
关于动态获取路由已在这里给出方案Vue - vue-admin-template模板项目改造：动态获取菜单路由这里是在此基础上升级成vue3和ts，数据和网络请求是通过mock实现的具体代码请看demo!!!本地权限控制，具体是通过查询用户信息获取用户角色，在路由守卫中通过角色过滤本地配置的路由，把符合角色权限的路由生成一个路由数组动态获取菜单路由其实思路是一样的，只不过路由数组变成从服务器获取，通过查询某个角色的菜单列表，然后在路由守卫中把获取到的菜单数组转成路由数组动态路由实现是参考。
vue 获取动态路由
09-01
在Vue中获取动态路由可以通过`$route.params`来实现。`$route.params`是一个对象，包含了所有动态路由参数的键值对。 假设你的动态路由是使用`:id`参数，你可以通过以下方式获取它： ```javascript this.$route....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值