Vue: 声明式导航（router-link）的跳转传参的两种方式

已于 2023-09-01 17:22:27 修改
阅读量935 收藏 4
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript ecmascript
于 2023-09-01 17:12:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/132627814
版权
本文详细介绍了在Vue中使用`router-link`进行声明式导航时，如何通过查询参数和动态路由来传递参数。包括查询参数的传参语法和动态路由的配置与接收值的方法，并探讨了动态路由参数的可选符使用场景。
摘要由CSDN通过智能技术生成
了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue2（6）之声明式导航router-link类名&传参/路由重定向/路由两种模式hash&history/编程式导航路径跳转&传参/案例面经基础版/vueCli自定义创建项目/eslint
qq_66318904的博客
05-06 829
router-link的两个高亮类名 太长了，我们希望能定制怎么办声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOMApp.vue
【Vue3进阶秘籍】玩转路由to！带你飞越导航的两种姿势！
最新发布
Jacklx888的博客
08-25 1044
Hey小伙伴们，今天要给大家带来的是Vue3中非常实用的路由导航技巧——`to`的两种使用方法！无论是初学者还是老司机，都能从中收获满满！👩‍💻✨
Vue -- router-link(传参)
bobobocai的博客
12-14 2025
<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link> 比起写死的 <a href="..."> 会好一些，理由如下： 无论是 HTML5 history 模式还是
vue之router-link页面跳转及传参
weixin_42949219的博客
12-22 5275
注意，这种方式需要在路由配置中定义了对应名称的路由，并且参数会被作为 URL 的一部分，如 /destination/123/example。，store是vuex应用的核心，也就是一个容器，包含着应用中大部分的状态，更改store中的状态唯一方法是提交mutation。上面的示例中，/destination 是目标路由的路径，query 属性被用来传递参数。// // 如果取消跳转地址栏会变化，这时保持地址栏不变。// 访问 query 中的参数。// // 正常跳转。
Vue路由(router-link)——高亮、动态传参
m0_53951384的博客
11-07 5211
router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）
vue中router-link的传参
sjszscx的博客
06-23 3777
<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 本次我介绍如何利用router-link进行传递参数 官网给出的例子 <router-link...
router-link传参
weixin_33806509的博客
08-11 143
果然还好是一小部分一小部分记录的好。 <router-link ：to="info">中:to特性可以是路径str，也可以是一个对象形式str。 当info是对象时可以携带参数： 　　1.{path:str,query:{x:a,y:b}},在另一个视图中可以$route.query.x获取数据。 　　2.{name:pre_name,params:{x:a,y:b}} ,pr...
vue router-link传参以及参数的使用实例
08-28
在Vue.js应用中，Vue Router是官方推荐的路由管理库，它使得页面间的导航变得简单。在本篇文章中，我们将深入探讨如何通过`router-link`组件进行参数传递，并学习如何在目标组件中获取这些参数。 首先，让我们了解...
Vue 页面跳转不用router-link的实现代码
08-27
Vue 页面跳转不用 router-link 的实现代码 本文主要介绍了 Vue 页面跳转不用 router-link 的实现代码，文中给大家介绍了 Vue router-link 跳转传值示例，需要的朋友可以参考下。 首先， Vue router-link 是 Vue.js...
vue-router传参的四种方式超详细
热门推荐
前端开发工程师
06-21 4万+
工作中遇到的vue路由传参的四种方式
vue的router-link传参问题
weixin_30878361的博客
06-21 219
　　一般来说，可以通过查询字符串的方式将参数传过去，方法如下： <router-link :to="{path:'/Detail', query:{ name: id }}"></router-link> 这里要非常注意一个问题，就是在to前面必需加冒号 : ，使其变成动态绑定属性的形式，后面的参数才能被正确解析，否则这堆东西将被视作一个字符串原封不动地传过去，...
如何使用router-link对象方式传递参数？
liubangbo的专栏
10-28 974
文章转自：https://blog.csdn.net/qq_35393869/article/details/80251099 如何使用router-link对象方式传递参数？ 疑问：（判断和传参） 点击导航栏目，js如何判断自己点击的是哪个具体栏目？ 它们是如何传参的？ 如何使用params，携带查询参数？ 效果图解说： A. 点击选择【屈原“查看详情”】之前 B. 点击选择【屈原“查看详情”】之后 要点总结： 在vue-router中，有两大对象被挂载到了实例this；$
vue使用router-link :to=“{path:‘/index‘}“传参以及参数的使用
weixin_42216142的博客
12-11 2万+
从A页面跳转到B页面，要带A页面的列表行中的行id 在A页面跳转时带参数： &amp;amp;amp;amp;amp;amp;amp;amp;lt;router-link :to=&amp;amp;amp;amp;amp;amp;amp;quot;{path: '/franchiser/stores/salesclerk', query:{shopId:props.row.id}}&amp;amp;amp;amp;amp;amp;amp;quot;
使用vue-router的router-link传递参数（params,query）
Dwayne_dw的博客
01-14 2万+
使用router-link两种方式传递参数（params,query） &lt;!-- father.vue --&gt; &lt;template&gt; &lt;div&gt; // 路由 &lt;div&gt; &lt;router-link :to="{path:'/page1',query:{username}}"&gt;p...
vue项目——router-link传参 多种方式
qq_40556950的博客
10-30 1382
简单来说，router-link是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端查看到。 router-link传值几种方式：（还有其他方式的话小伙伴可以告诉我哟！） 方式一： route.js内的路由配置:（需要在路径后定义上要穿的属性名） /: 属性名 { path: ‘/che...
router-link传递参数并获取
生如夏花 炫至茶靡
03-16 2万+
跳转链接：&lt;router-link :to="{path:'libraryDetail/', query:{library_id:data.library_id}}"&gt;获取参数：library_id = this.$route.query.library_id;
router-link to实现带参数传递
weixin_44740072的博客
09-21 2751
router-link带参数传递
router-link跳转传参
08-22
要在 Vue.js 中使用 router-link 进行跳转并传递参数，你可以通过在 to 属性中指定目标路由路径，并在该路径后面添加 query 参数或者 params 参数来传递数据。 如果你想要传递 query 参数，可以这样做： ```html <router-link :to="{ path: '/target', query: { id: 1, name: 'example' } }">跳转到目标</router-link> ``` 在目标路由中，你可以通过 this.$route.query 来获取传递的参数： ```javascript this.$route.query.id // 获取 id 参数 this.$route.query.name // 获取 name 参数 ``` 如果你想要传递 params 参数，可以这样做： ```html <router-link :to="{ path: `/target/${id}` }">跳转到目标</router-link> ``` 在目标路由中，你可以通过 this.$route.params 来获取传递的参数： ```javascript this.$route.params.id // 获取 id 参数 ``` 记得在使用 params 参数进行跳转时，需要在定义路由规则时配置动态参数，例如： ```javascript { path: '/target/:id', component: TargetComponent } ``` 希望能帮到你！如果你还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脱发使我稳重

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值