＜router-link＞动态路由传参并接收参数

最新推荐文章于 2023-11-07 16:45:36 发布
最新推荐文章于 2023-11-07 16:45:36 发布
阅读量2.9k 收藏 9
点赞数 3
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/107868220
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意：
在子组件中 获取参数的时候是$route.params而不是
$router 这很重要~~~
在这里插入图片描述
在这里插入图片描述

通过@click方法传参跳转

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

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
参考：https://www.cnblogs.com/qiu2841/p/11018190.html

Vue: 声明式导航（router-link）的跳转传参的两种方式
Forever_Hopeful的博客
09-01 1040
Vue: 声明式导航（router-link）的跳转传参的两种方式
vue2（6）之声明式导航router-link类名&传参/路由重定向/路由两种模式hash&history/编程式导航路径跳转&传参/案例面经基础版/vueCli自定义创建项目/eslint
qq_66318904的博客
05-06 981
router-link的两个高亮类名 太长了，我们希望能定制怎么办声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOMApp.vue
vue动态路由配置及路由传参的方式
08-27
主要介绍了vue动态路由配置，vue路由传参的方式，文中给大家提到了router-link这个组件的相关知识,需要的朋友可以参考下
Vue路由(router-link)——高亮、动态传参
m0_53951384的博客
11-07 6667
router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）
vue 动态路由传参
abc541817535的博客
06-13 770
// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, 需要对应路由配置如下： { path: '/describe/:id', name: 'Describe', component: D...
路由动态传参
扮老虎的猪
08-05 3083
从列表页跳到编辑页时，经常需要传参。我比较常用的有下面两种： 一、刷新后失效 路由定义： { path: '/test', name: 'test', component: () => import('../views/Test.vue'), meta: {title:'', breadNumber: 1} } 路由跳转： this.$router.push({ name: 'test', params: { id...
动态路由传参
weixin_46452975的博客
07-12 319
//第一步------------在router里面注册一个组件，path路径直接传入参数 { path: '/articleDetial/:artid', component: articleDetial } //第二步------------点击跳转的时候直接传参 methods: { // 点击标题跳转到文章详情页面 getDetail (item) { this.$router.push(`/articleDetial/${item.art
vue router-link传参以及参数的使用实例
08-28
在本篇文章中，我们将深入探讨如何通过`router-link`组件进行参数传递，并学习如何在目标组件中获取这些参数。 首先，让我们了解两种常见的参数传递方式： 1. **通过查询参数（Query Parameters）** 查询参数通常...
vue项目——路由传参与router-link传参 多种方式详解
qq_40556950的博客
10-30 995
最近项目中涉及到跨页面传参数和后台进行数据交互，经过多方搜索参考决定用路由传参来解决。 Vue中给我们提供了三种路由传参方式，： 方法一：params传参（只能由name引入） 1.params传参、使用name： this.$router.push({ name:"Check",　 params:{id:item.id, num:item.num} }...
react路由的使用 react-router-dom 、二级路由的样式丢失问题、路由传参
weixin_44437816的博客
06-28 971
react路由的使用 react-router-dom 、二级路由的样式丢失问题、路由传参
vue router-link 动态传值
weixin_30752699的博客
12-15 397
1、路由配置： 1 export default new Router({ 2 routes: [ 3 { 4 path: '/details/:id', 5 name: 'details', 6 component: Details 7 } ...
动态路由传参，组件 接收 传递过来的数据 的多种实现方式（$route.params 、props 、props设置为对象）
weixin_72303943的博客
06-05 1516
动态路由传参，组件 接收 传递过来的数据 的多种实现方式（$route.params 、props 、props设置为对象）
vue-动态路由传参
俊人呀的博客
03-02 1692
在vue点击跳转时，需要带着当前页面的参数id一起跳转<router-link :to="'/url/' + item.id">跳转到url中 带着当前的item.id例如下个页面的数据需要这个页面跳转时的id来判断显示哪条。<!-- 字符串 --> <router-link to="home">Home</router-link> <!--
Vue.js中的router基础(动态、传参、接参、编程式导航 )
纸飞机博客
04-28 485
前面是router的一级和二级路由,下面是路由里稍微复杂一点的东西:路由的动态,传参,接参。 这些个我们通过寺库网的分类页和分类页中每个类的详情的数据来做 寺库网:https://m.secoo.com 按照前面的,先配置好前面一篇的一级路由,但是稍微名字有些更改如下: 动态路由、路由传参: 1.先配置跨域方法:反向代理 在根目录建立vue.config.js文件,...
动态路由vue-router-路由传参方式(params)
shuaishuaizhang8的博客
08-11 607
动态路由vue-router配置 首先创建组件页面User.vue 在router文件下index.js页面配置路由import组件 配置动态路由在path:’/user/:userId’, 在app.vue页面绑定相应的id值 然后再user.vue页面获取此id拿到信息 10. // route是路由route 是路由route是路由router对象下的处于活动状态的路由**** ...
动态路由传参和params传参
TTST_HTSN的博客
11-17 749
动态路由传参和params一起传参的时候， this.$router.push({ path: ‘/home/:id’, params: { type: ‘11’ } }) 在需要参数的页面打印结果，不会出现内容params的内容 所以我猜想，params和path不应该一起使用，应该用params加name来组合。可以用path加query来传递参数，这个可以得到。 ...
23 动态路由（路由传参）
全网同名：PBitW！ 可以去掘金关注我！
08-25 242
认识url 传递参数的方式 动态路由（params方式） query方式 获取参数
YDOOK:vue3:vue-cli4: vue的编程式导航方式 router.() 动态路由传参方式介绍
YDOOK
03-27 304
Python 光速入门 122占位 - YDOOK
router-link的to动态路由传递参数
最新发布
04-05
### Vue.js 中 `router-link` 的 `to` 属性动态路由参数传递 在 Vue.js 中，可以通过 `<router-link>` 组件的 `to` 属性来实现页面之间的跳转，并且支持通过路径（`path`）或者命名路由（`name`）的方式传递动态参数。以下是详细的说明和示例。 #### 1. 使用 `path` 方式传递动态参数 当使用 `path` 进行动态路由参数传递时，可以直接将参数拼接到 URL 路径中。例如： ```html <router-link :to="{ path: '/user/' + userId }">User Profile</router-link> ``` 在这个例子中，假设 `userId` 是一个变量，则最终生成的链接可能是 `/user/123` 或者其他类似的路径[^1]。 如果需要传递多个查询参数，也可以通过 `query` 对象完成： ```html <router-link :to="{ path: '/search', query: { keyword: 'Vue.js', page: 1 } }"> Search Results </router-link> ``` 上述代码会生成类似于以下的 URL 地址： `http://example.com/search?keyword=Vue.js&page=1`[^4]。 --- #### 2. 使用 `name` 和 `params` 方式传递动态参数 除了 `path` 外，还可以利用命名路由（`name`）配合 `params` 来传递参数。这种方式更适合于嵌套路由或更复杂的场景。 首先，在定义路由时需设置名称字段： ```javascript const routes = [ { name: 'UserProfile', path: '/user/:id', component: UserProfileComponent, }, ]; ``` 接着可以在模板中这样写： ```html <router-link :to="{ name: 'UserProfile', params: { id: userId } }"> User Profile </router-link> ``` 这里需要注意的是，如果使用 `params`，则必须搭配 `name` 属性而不是 `path`，因为只有命名路由才能识别 `params` 参数。 接收这些参数的地方通常是在目标组件中的生命周期钩子函数里获取它们： ```javascript export default { data() { return { currentUserId: null, }; }, created() { this.currentUserId = this.$route.params.id; }, }; ``` --- #### 3. 查询字符串方式 (`query`) 对于一些简单的过滤条件或其他非必要信息，推荐采用查询字符串的形式传参。这不仅方便调试，也更容易被搜索引擎抓取。 下面是一个实际的例子： ```html <router-link :to="{ path: '/products', query: { category: 'electronics', sort: 'asc' } }"> Electronics Products (Ascending Order) </router-link> ``` 访问该链接后，URL 将变为类似形式： `http://example.com/products?category=electronics&sort=asc`。 而在对应的组件内部可通过 `$route.query` 获取这些值： ```javascript this.categoryFilter = this.$route.query.category || 'all'; this.sortOrder = this.$route.query.sort || 'desc'; ``` --- #### 总结 无论是通过 `path`、`name` 加上 `params`，还是借助 `query` 字符串，都可以灵活满足不同业务需求下的动态路由参数传递。具体选择哪种方式取决于项目设计和个人偏好。 ```html <!-- Path with Query --> <router-link :to="{ path: '/item', query: { productId: item.id } }"> Item Details </router-link> <!-- Named Route with Params --> <router-link :to="{ name: 'ItemDetails', params: { itemId: item.id } }"> View Item </router-link> ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值