$router.push跳转页面传参

$router.push传参与收参

//传参
<el-button type="text" @click="$router.push('/games/Match?id='+1)">页面跳转1</el-button>

//收参
const id = this.$route.query.id;

$router.push传对象与接收

//传对象
<template>
  <div>
    <el-button type="text" size="small" @click="puth">页面跳转2</el-button>
  </div>
</template>

<script>
export default {
  mounted() {},
  data() {
    return {};
  },
  methods: {
    puth() {
      const obj = { id: 1, name: "John" };
      const serializedObj = JSON.stringify(obj);
      this.$router.push({ path: "/games/Match", query: { obj: serializedObj } });
    },
  },
};
</script>

<style scoped></style>

//接收
<template>
  <div></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    const serializedObj = this.$route.query.obj;
    const obj = JSON.parse(serializedObj);
    // 使用解析后的对象进行相应的处理
    console.log(obj.id); // 输出: 1
    console.log(obj.name); // 输出: John
  },
};
</script>