vue路由传参的两种方式的区别_vue路由跳转获取参数
项目场景：
例如：点击table表格第一列进入详情页，这时候我们进行路由跳转就需要携带一些参数以便我们在详情页使用
跳转方式
一般我们有两种方式让路由携带参数
1.路由传参query(path是路由地址，query是需要传递的参数)
goDetail() {
this.$router.push({
path: "/publish",
query: {
roleName: "admin",
id: 1,
},
});
},注意：如果传入的参数存在对象，则必须转成JSON字符串传入，接收的时候再转换
goDetail() {
let arr = [{
name:"admin",value:111},{
name:"admin2",value:222}]
this.$router.push({
path: "/publish",
query: {
roleName: JSON.stringify(arr),
id: 1,
},
});
},2.路由传参params（name与路由的name对应，params是需要传递的参数）
goDetail() {
this.$router.push({
name: "publish",
params: {
roleName: "admin",
id: 1,
},
});
},注意：params传参刷新页面的时候会丢失数据，解决方法是在路由的配置文件里给该路由后面拼接需要的参数
{
path: "/Publish/:roleName/:id",//:roleName与:id之间的/可以省略，看自己喜好
name: "publish",
component:import("../components/PublishApp"),
},接收路由参数：
1.query的接收方式：
//参数不存在对象时
created() {
console.log(this.$route.query)
},
//参数存在对象时,只能单独取，直接打印query报错
created() {
console.log(JSON.parse(this.$route.query.roleName));
},2.params的接收方式：
created() {
console.log(this.$route.params);
},注意：
1.query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示;
2.如果用params又不想刷新后丢失参数，只能拼在路由path后面；
3.个人觉得用params把参数拼在路由后面比query好看很多；
4.params想携带数组对象这些类型的数据，又不想刷新后丢失，我没找到解决办法，还是用query，有没有大神知道告诉我一下谢谢！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/234925.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年11月1日 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
