vue路由传参的两种方式

听风叙雨

已于 2022-07-22 14:30:48 修改

阅读量1.7w

点赞数 15

文章标签： vue.js 前端 javascript

于 2022-06-14 16:11:57 首次发布

本文链接：https://blog.csdn.net/m0_60914344/article/details/125277584

版权

本文详细介绍了在Vue.js中如何通过query和params两种方式传递路由参数，包括对象转JSON字符串的处理，以及params参数在页面刷新后的丢失问题。同时，对比了query和params在地址栏显示的区别，并提出了在params携带复杂数据时的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

例如：点击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，有没有大神知道告诉我一下谢谢！！！