vue路由传参

目录

query

传参

接收

params

传参

接收

---

query

path和query

传参

 this.$router.push({
        path: "/home",
        query: {
          name: "admin",
          id: 1,
        },
});


// 若传递的参数存在对象，需要转成JSON字符串，接收之后再转换
let userName={
firstName: 'zhang',
lastName:'gongzi'
};
 this.$router.push({
        path: "/home",
        query: {
          name: JSON.stringify(userName),
          id: 1,
        },
});

接收

//参数不存在对象时
created() {
    console.log(this.$route.query)
  },

//参数存在对象时,只能单独取，直接打印query报错
created() {
   console.log(JSON.parse(this.$route.query.name));
  },

params

name和params

传参

 this.$router.push({
        // name和路由的name对应
        name: "home",
        params: {
          name: "zhanggongzi",
          id: 1,
        },
      });

params传参刷新页面的时候会丢失数据，解决方法是在路由的配置文件里给该路由后面拼接需要的参数

{
    path: "/home/:name/:id",
    name: "home",
    component:()=>import("../components/Home"),
},

接收

 created() {
    console.log(this.$route.params);
  },