使用$router.push() 进行pramas传参遇到的问题

最新推荐文章于 2024-05-15 22:50:31 发布
最新推荐文章于 2024-05-15 22:50:31 发布
阅读量544 收藏
点赞数
分类专栏： vue 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDNJXZK/article/details/124506373
版权
vue 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
前端
14 篇文章 0 订阅
订阅专栏

使用$router.push() 进行pramas传参遇到的问题

路由结构

以及路由为 ‘/’ 其子路由为‘/chatPage’
在这里插入图片描述

遇到的问题

在进行路由跳转params传参的时候 路由正常跳转 参数无法正常传递
在开发者工具显示 params为空 显然 这个参数没有正确的传递过来
在这里插入图片描述
我又试了一下query传参 参数是可以传递过来的
在这里插入图片描述

问题解决

！！知识点： 在进行路由的push操作时 要注意 pramas传参和query传参稍有不同 params传参必须要使用路由的name进行跳转才可以

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

总结

在进行路由跳转传参的时候 需要使用name进行路由的匹配跳转

如果对您有用麻烦点个支持呗，您的鼓励将是我敲代码的动力 如果表达有误或不足也请您评论留言 🙇‍

Justkang前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue.js this.$router.push无效的问题
10-18
今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中this.$router.push()通过Param传参错误
weixin_56861492的博客
08-20 2372
vue中this.$router.push()通过Param传参错误
vue - vue中使用this.$route.params获取不到参数的原因
qq_43886365的博客
11-17 9737
如果想要this.$route.params 获取到this.$route.push()传的参数，一定要使用name属性来指定路由 不要用path属性；
Vue Router两种传参pramas和query的区别使用
weixin_30394633的博客
07-24 1018
params传参 params传参改变底层栏（url地址）里的path路径 地址栏：http://localhost:3000/home/1 　　 <router-link :to="/home/1">parans传参</router-link> { path："/home/:id"，//找到当前路径规则定然后义个占位符（随便定义变量）：例如...
vue接收不到params类型的参数
范天缘的博客
08-17 2148
params参数丢失
this.$router.push传递参数失败undefined
明日复明日的博客
05-10 6425
首先据我查的资料，this.$router.push路由跳转有以下几种形式： 1. 不带参数 this.$router.push('/home') this.$router.push({name:'home'}) this.$router.push({path:'/home'}) 2. query传参 this.$router.push({name:'home',query: {id:'1'}}) this.$router.push({path:'/home',query: {id:
vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
qq_33235680的博客
03-02 2850
vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
Vue this.$router.push() 获取不到params参数
微风的博客
04-14 911
Vue this.$router.push() 获取不到params参数
vue-router params无法传参的问题（路由传参）
h919685908的博客
09-09 3080
路由传参方式导致传参失败
vue.js this.$router.push获取不到params参数问题
10-15
主要介绍了vue.js this.$router.push获取不到params参数问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中this.$router.push参数获取方法
11-26
由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数：   通过name...
this.$router.push() 方法中 path不能和params一起使用，否则params将无效
南北极之间
07-09 3008
this.$router.push() 方法中 path不能和params一起使用，否则params将无效！！ this.$router.push传递参数有2种方式： 第一种： 传递参数 -- this.$router.push({path: ' 路由 ', query: {key: value}}) 参数取值 -- this.$route.query.key 使用这种方式，传递参数会拼接在路由后面，出现在地址栏. 第二种： 传递参数 -- this.$router.push({name: '
vue router分别使用query和params传参的不同以及刷新页面出现的数据消失
wangyinze123的博客
12-22 1914
query传参 1、this.$router.push(path:’/diyName’,query:{ a:1, b:2,c:3}) 2、this.$router.push({path:’/discomfortBook’,query:{obj:{a:1,b:2,c:3}}}) 推荐第二种方式。因为当对象属性字段比较多的时候，第一种传参方式会把query里的所有字段属性都展示出来，导致浏览器上的url会比较长，所以用第一种方式传参可能导致url超出chorme规定url最长字节长度不超过2m param
vue-router params无法传参的问题
热门推荐
流浪的神明
10-08 2万+
最近需要使用router 的params传参，原来使用的是query传参，因为参数太多，而且query传参可以在地址栏看到，所以想要使用params传参。这是我开始写的代码：this.$router.push({ path:'Test', name:"Test", params:{ name:
解决Vue Router4中params 传参失效和报错问题
LP'S Blog
02-27 4441
在使用vue-router4中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 使用这
router.push方法params不跳转问题
weixin_45915554的博客
05-12 1598
用vue3开发的时候遇到了怪问题
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1184
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
this.$router.push怎么路由传参
09-06
对于使用 Vue.js 进行开发的应用程序中，可以使用 `$router.push` 方法进行路由导航，并通过路由传递参数。下面是一个示例： ```javascript // 在组件中使用 $router.push 进行路由导航，同时传递参数 this.$router.push({ path: '/path', query: { paramName: paramValue } }); ``` 在上述示例中，`path` 是你要导航的目标路径，`query` 是一个对象，包含要传递的参数及其值。在目标组件中，可以使用 `$route.query` 来获取传递的参数。 例如，在目标组件的 `mounted` 钩子函数中，可以这样获取传递的参数： ```javascript mounted() { const paramName = this.$route.query.paramName; // 使用 paramName 进行后续操作 } ``` 希望这个回答能够帮助到你！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值