Vue页面传参详解（Router-link）

最新推荐文章于 2025-04-11 12:03:45 发布
最新推荐文章于 2025-04-11 12:03:45 发布
阅读量482 收藏 1
点赞数
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43147591/article/details/115177657
版权

方法一

在这里插入图片描述
路由文件的配置: 此时不需要做任何的更改
在这里插入图片描述

其他组件来获取传递的参数:在这里插入图片描述
在url上表现的显示:

在这里插入图片描述
在这里插入图片描述

方法二

设置要传递的参数在这里插入图片描述
此时路由文件需要简单的配置一下:在这里插入图片描述
注意:两处的ic名称一定要一样 ，和c#mvc中传递参数的形式一样 ，属于rest风格。在这里插入图片描述

点击其中的详细信息，进行跳转页面在这里插入图片描述

老于啊
关注
Vue -- router-link(传参)
bobobocai的博客
12-14 2065
<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 <router-link> 比起写死的 <a href="..."> 会好一些，理由如下： 无论是 HTML5 history 模式还是
vue项目——路由传参与router-link传参 多种方式详解
qq_40556950的博客
10-30 1006
最近项目中涉及到跨页面传参数和后台进行数据交互，经过多方搜索参考决定用路由传参来解决。 Vue中给我们提供了三种路由传参方式，： 方法一：params传参（只能由name引入） 1.params传参、使用name： this.$router.push({ name:"Check",　 params:{id:item.id, num:item.num} }...
vue router-link传参以及参数的使用实例
08-28
下面小编就为大家带来一篇vue router-link传参以及参数的使用实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中router-link的传参
sjszscx的博客
06-23 3848
<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。 通过to属性指定目标地址，默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 本次我介绍如何利用router-link进行传递参数 官网给出的例子 <router-link...
《Vue Router实战教程》21.扩展 RouterLink
大强博客
04-11 607
RouterLink 组件提供了足够的 props 来满足大多数基本应用程序的需求，但它并未尝试涵盖所有可能的用例，在某些高级情况下，你可能会发现自己使用了 v-slot。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop。// 如果使用 TypeScript，请添加 @ts-ignore。
vue之router-link页面跳转及传参
weixin_42949219的博客
12-22 6421
注意，这种方式需要在路由配置中定义了对应名称的路由，并且参数会被作为 URL 的一部分，如 /destination/123/example。，store是vuex应用的核心，也就是一个容器，包含着应用中大部分的状态，更改store中的状态唯一方法是提交mutation。上面的示例中，/destination 是目标路由的路径，query 属性被用来传递参数。// // 如果取消跳转地址栏会变化，这时保持地址栏不变。// 访问 query 中的参数。// // 正常跳转。
使用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 2.0 常用基础知识点之router-link
12-09
在Vue 2.0中，`router-link`组件是用于创建导航链接的关键元素，它与`router-view`配合使用，实现了单页面应用(SPA)的页面切换。 首先，我们来看`$route.params`。这是一个对象，存储了动态路径参数和全匹配片段。...
详解vue中router-link标签所必备了解的属性
10-17
在Vue.js框架中，Vue Router是官方提供的路由管理器，它和Vue.js的深度集成让构建单页面应用变得非常容易。router-link是Vue Router中一个非常重要的组件，用于创建导航链接。它不会向服务器发送请求，而是内部会把...
详解如何使用router-link对象方式传递参数？
10-17
在使用Vue.js框架开发单页面应用程序时，Vue Router是一个必不可少的插件，用于管理前端路由。路由中传递参数通常是一个需要掌握的重要知识点，这篇文章主要介绍了如何使用router-link对象的方式在Vue Router中传递...
vue页面传参
woshi759956817的博客
09-07 104
当前页面传参数 去往下一个页面传参 即可打印出
Vue传参一箩筐(页面、组件)
10-17
主要介绍了Vue传参一箩筐(页面、组件)，Vue页面、组件之间传参方式繁多，此处罗列出常用的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue页面传参
小白菜
04-27 2007
常用以下两种 1.path query 跳转 //跳转详情 this.$router.push({ path: '/url', query: { id:id//参数 } }) 接受： var id = this.$route.query.id; //接受参数 2.使用name +路由名
vue 页面传参
Ann_52547的博客
05-20 329
【代码】vue 页面传参。
关于vue页面传参
月来better
06-24 689
页面之间的传参是不可避免的操作，那vue框架中关于页面传参的方式都有哪些呢？GO，带着疑问直奔主题！！ 第一种方式：利用路由导航router-link中to属性传递参数 第二种方式：通过this.$router.push()传递参数 补充：接收参数： 再补充说明一下：router是VueRouter的实例，而route是当前正在跳转的路由对象 第三种方式：路由组件传参 在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。使用 prop
Vue路由(router-link)——高亮、动态传参
m0_53951384的博客
11-07 6864
router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）
VUE 页面传参、页面跳转
暂无内容
07-14 3003
VUE 页面传参、页面跳转； router参数传递； router.push（前端页面跳转）； router-link（后端代码跳转）；
router-link
最新发布
05-23
### Vue.js 中 `router-link` 的使用方法 #### 基本概念 `router-link` 是 Vue Router 提供的核心组件之一，主要用于在 Vue 应用中实现页面间的导航功能。通过设置其属性值，可以灵活控制导航行为以及生成的 HTML 元素。 --- #### 属性详解 1. **to** - 定义目标地址，支持字符串路径或对象形式。 ```html <!-- 字符串路径 --> <router-link to="/home">Home</router-link> <!-- 对象形式 --> <router-link :to="{ path: '/about' }">About</router-link> ``` 这里的 `to` 属性决定了点击后跳转的目标路由[^1]。 2. **replace** - 如果设置了该属性，则不会向浏览器历史记录中添加新条目，而是替换当前的历史记录项。 ```html <router-link to="/home" replace>Home (Replace)</router-link> ``` 3. **tag** - 自定义生成的标签，默认为 `<a>` 标签。可以通过此属性指定其他类型的标签（如按钮）。 ```html <router-link to="/home" tag="button">Go Home</router-link> ``` 4. **active-class 和 exact-active-class** - 当前路由匹配时应用的 CSS 类名。 - 默认激活类名为 `.router-link-active`。 - 可以自定义激活状态下的类名： ```html <router-link to="/home" active-class="custom-active">Home</router-link> ``` - 若希望仅当完全匹配时生效，可使用 `exact-active-class`： ```html <router-link to="/" exact-active-class="on">Root</router-link> ``` 5. **event** - 指定触发导航的事件类型，默认为 `"click"`。 ```html <router-link to="/home" event="dblclick">Double Click Me!</router-link> ``` --- #### 示例代码 以下是综合使用的示例： ```html <template> <div> <!-- 基础用法 --> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <!-- 替换历史记录 --> <router-link to="/settings" replace>Settings (No History)</router-link> <!-- 自定义标签 --> <router-link to="/profile" tag="button">Profile Button</router-link> <!-- 自定义激活类名 --> <router-link to="/dashboard" active-class="highlighted">Dashboard</router-link> <!-- 路由视图 --> <router-view></router-view> </div> </template> <style> .highlighted { color: green; } </style> ``` --- #### 注意事项 1. 在 Vue 3 中，某些旧版特性可能会发生变化。例如，`exact-active-class` 需要显式声明才能正常工作[^3]。 2. 如果需要程序化导航，也可以使用 `$router.push()` 方法替代 `router-link`[^2]。 ```javascript this.$router.push('/home'); ``` --- #### 总结 `router-link` 是 Vue Router 实现客户端单页应用的关键工具，提供了丰富的配置选项来满足不同场景需求。合理利用这些属性可以帮助开发者更高效地构建 SPA 页面。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值