vue 路由传参的两种方式

本文链接：vue路由传参的两种方式_听风叙雨的博客-CSDN博客_vue路由传参vue路由传参的两种方式vue路由传参的两种方式_听风叙雨的博客-CSDN博客_vue路由传参

跳转方式

一般我们有两种方式让路由携带参数

1.路由传参query(path是路由地址，query是需要传递的参数)

oDetail() {
      this.$router.push({
        path: "/publish",
        query: {
          roleName: "admin",
          id: 1,
        },
      });
    },
————————————————
版权声明：本文为CSDN博主「听风叙雨」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_60914344/article/details/125277584

注意：如果传入的参数存在对象，则必须转成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);
  },