vue中this.$route.query和this.$route.params的正确使用

ᝰꪶꪮડꫀ²⁰.525

于 2022-09-13 14:14:32 发布

阅读量738

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59127121/article/details/126832238

版权

1.this.$route.query的使用
(1)、传参数：

this.$router.push({
         path: '/checkout',
         query:{
               productId:id,
          }
}）

(2)、获取参数：

this.$route.query.productId

(3)、在url中形式（url中带参数）

http://xxx/#/goodsDetails?productId=150642571432849

(4)、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在（项目中遇到此问题）

2.this.$route.params的使用
（1）、传参数：


this.$router.push({
         name: 'checkout',
         params:{
               productId:id,
          }
}）;

（2）、获取参数：


this.$route.params.productId

（3）、在url中形式（url中不带参数）

http://172.19.186.224:8080/#/checkout

（4）、页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在（(url中没带参数)）

关注