this.$router.push的query传参与接收

最新推荐文章于 2023-12-22 10:31:38 发布
最新推荐文章于 2023-12-22 10:31:38 发布
阅读量1.5k 收藏 2
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56105902/article/details/120695210
版权

单纯跳转

this.$router.push(''你要跳转的路径''）          与   <router-link>相似

带参数

 this.$router.push({path:"你要跳转的路径",query:{你要携带的参数}})

 在你跳转之后的页面进行获取（在created或者mouted里面进行获取）

this.$route.query(你跳转的时候携带的参数)

 千万要记住传的时候是$router获取的时候是$route，一个字母的差距

                        差之毫厘，失之千里

不愿做码农
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 使用 this.$router.push 传参数，接参数的 query或params 两种方法示例
G佳伟
11-16 2489
背景：vue项目 使用this.$router.push进行路由跳转时，可以通过query或params参数传递和接收参数。
this.$route.query和this.$router.push
magic_818的博客
11-14 614
this.$route.query和this.$router.push
关于vue router 传参获取不到问题
lzcwds的博客
08-17 2万+
在当前路由中有一个toArticle方法可以跳转到article页面 methods:{ toArticle:function(index) { this.$router.push({path:'/article',params:this.blogList[index]}); } } 在article中接受不到params mounted(...
VueRouter: this.$route.push跳转,携带参数
热门推荐
天涯芳草
04-26 4万+
this.$router.push传递参数有2种方式： 传递参数-- this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值-- this.$route.query.key 使用这种方式，传递参数会拼接在路由后面，出现在地址栏. 传递参数-- this.$router.push({name: ' 路由的name ', params: {key: value}}) 参数取值-- this.$route.params...
Vue this.$router.push传递参数的2种方式
Yy02123的博客
04-18 1万+
Vue this.$router.push传递参数的2种方式： 一、传递参数 – this.$router.push({path: ’ 路由 ', query: {key: value}}) 参数取值 – this.$route.query.key 使用这种方式，传递参数会拼接在路由后面，出现在地址栏. 二、传递参数 – this.$router.push({name: ’ 路由的name ', params: {key: value}}) 参数取值 – this.$route.params.key 使用这
vue.js this.$router.push获取不到params参数问题
10-15
- 通过`path`属性定义路由，并在`this.$router.push`时将参数放在`query`对象内。 - 示例：`this.$router.push({ path: '/xxx', query: { idname: id } })` - 接收参数：`this.$route.query.idname` 2. **params...
vue-router 2.0 跳转之router.push()用法说明
10-14
this.$router.push({ path: '/my/profile', query: { ...this.$route.query, ...queryData } }); ``` 针对描述中提到的问题，即在 iOS 设备上点击返回键时，路由改变但页面内容不更新，解决方案是利用 Vue Router ...
浅析vue-router jquery和params传参(接收参数)$router $route的区别
12-11
this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！ this.$router 和this.$route有何区别？ 在...
vue router 传参获取不到的解决方式
12-13
this.$router.push({path:'/article',params:this.blogList[index]}); } } 在article中接受不到params mounted(){ console.log(this.$route.params) //这里输出undifined } 导致这样的原因是因为params需要...
【解决】this.$router.push跳转到另一个页面mounted事件不执行。拿不到this. $route.query的值。（vue2/vue3））
huangfuyk.的博客
08-14 3095
使用this.$router.push({path: ‘xxxx’, query: {id: “1”}})跳转到“xxxx”页面时，发现跳转成功且地址栏显示id=1，但是在该页面的mounted方法里却拿不到this. $route.query.id的值。发现该页面在app.vue文件中被。...
router路由跳转使用query传递参数刷新后数据无法获取
lindali1115的博客
04-24 4473
代码示例 路由跳转代码 if (data.code === 200) { this.$router.push({ name: 'admin/', query:{ accountInfo:data.data, } }) } 获取参数,初次载入 console.log(this.$route.quer...
vue this.$router.push query传递对象方法
alokka的博客
09-13 3165
this.$router.push({ path: '/home', query: { params: JSON.stringify({ name: 'lokka', age: 18 }) } }); let params = JSON.parse(this.$route.query.params) this.name = params.name; this.age = params.age;
Vue中this.$router.push（参数） 实现页面跳转并接收参数
m0_65360496的博客
12-22 1535
Vue中this.$router.push（参数） 实现页面跳转并接收参数加传递对象数据并接收
vue this.$router.push 实现路由跳转
RAGACM的博客
11-20 2726
使用this.$router.push实现路由跳转的两种方法： 一、query传递参数 使用query进行传参就类似于get，它的参数会在链接中显示出来。 使用query时，路径需要用path this.$router.push({path:'路径',query{id:参数}}) 效果图： 二、params传递参数 使用params进行传参就类似于post，它的参数不会在连接中显示出来。 使用params时，路径需要使用name this.$router.push({name:'路径',params{
this.$router.push跳转页面携带参数
qq_39176307的博客
05-07 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、params和query使用方式二、实现代码1.index.js代码2.test.vue代码3.testParams代码4.testParams代码5.效果总结 前言 this.$router.push进行页面跳转时。携带参数有params和query两种方式。 一、params和query使用方式 query方式： this.router.push(path:′testQuery′,query:testQuery:′t.
Vue路由传参的两种方式query和params
weixin_51232686的博客
11-01 1994
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在。params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失。二、 this.$router.replace() (用法同上,push)query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数。params相当于POST请求，参数不会在地址栏中显示。
vue三种路由传参方式：路由属性push方法、params、query
此鱼非闲鱼也的博客
08-14 6202
vue路由传参的三种方式： 场景：点击当前页的某个按钮跳转到另一个页面，并将某个值带过去 <div class=“item” @click=“getDetail(3)”>查看详情 1、直接使用路由属性配置this.$router.push实现携带参数跳转 methods:{ getDetail(id){ this.$router.push({path:`/user/${id}/`}) } } 对应的路由配置(每个路由配置信
this.$router路由params、query传参
前端小菜鸟的成长记录
10-13 2383
路由跳转传参
vue获取url中的参数值,this.$route.query
qq_45516629的博客
05-21 1万+
如果有的参数可传可不传，可以使用？传参 例如：http://192.168.1.12:8080/#/detail/?id=123 获取的时候： let id = this.$route.query.id 一、在vue组件单页面中获取页面参数 watch: { "$route.query": { handler() { if (this.$route.query) { // this.departmentDid 是在
this.$router.push传参与接收
最新发布
02-28
this.$router.push是Vue Router提供的方法，用于进行路由跳转。它可以接收一个路径参数和一个可选的查询参数对象。 传参： 1. 传递路径参数：可以在push方法中直接传入一个路径字符串作为参数，例如： ``` this.$router.push('/user/123') ``` 这里的'/user/123'就是要跳转的路径，其中的123是路径参数。 2. 传递查询参数：可以在push方法中传入一个包含查询参数的对象作为参数，例如： ``` this.$router.push({ path: '/user', query: { id: 123 } }) ``` 这里的'/user'是要跳转的路径，query对象中的id属性就是查询参数。 接收参数： 在目标路由组件中，可以通过$route对象来获取传递的参数。例如，在接收路径参数的情况下，可以通过$route.params来获取： ``` this.$route.params.id ``` 在接收查询参数的情况下，可以通过$route.query来获取： ``` this.$route.query.id ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值