对于vue路由传参方式的总结

最新推荐文章于 2024-03-10 20:07:28 发布

苏琨博

最新推荐文章于 2024-03-10 20:07:28 发布

阅读量467

点赞数

分类专栏：前端学习者文章标签： vue vue-router

本文链接：https://blog.csdn.net/weixin_43729581/article/details/93230193

版权

本文总结了Vue Router的五种传参方式：通过params、query、对象方式及name属性，详细阐述了每种方式的使用场景和特点，强调了params与query的区别，以及如何通过props实现组件与路由的解耦。

摘要由CSDN通过智能技术生成

在vue-router中想跳转有两种实现的方式：

 标签实现：<router-link to="url"></router-link>
 js实现： this.$router.push(url) //跳转到指定路由，可后退
 		 this.$router.replace(url) //跳转到指定路由，不可后退

在这里对应的路由传参方式就有两套，但实际上两者传参的方法是等价的，所以以js跳转的方式为例。
方式一：最通常的做法就是通过配置路由词典时指定要传递的参数名，如下图：

在原网页使用this.$router.push("/target/1")就可以携带我们的参数id=1跳转到目标网页,这是目标网页就可以通过this.$route.params.id取到id的值1了。这时候我们可以发现地址栏的地址变为了http://localhost:8080/#/target/1多次F5刷新在控制台都能打印出id的值1。
方式二：我们可以通过查询字符串的方式传递参数，例如this.$router.push("/target?id=1"),此时在目标网页中就需要通过query获取参数了this.$route.query.id，如果使用方式一的获取参数的方法，那么得到的结果将会是undefined.我们也可以发现地址栏变为http://localhost:8080/#/target?id=1多次F5刷新在控制台都能打印