vue params和query传参

1.params传参
Student.vue组件

<template>
  <div>
    <button @click="jump">点我跳转到School页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    jump() {
      // params传参
      this.$router.push({
        name: "School",//这里需要注意:params只能用name来引入路由,而query则通过path引入路由
        params: {
          age: 12,
        },
      });
    },
  },
};
</script>

在School.vue里接收

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

2.query传参
Student.vue组件

<template>
  <div>
    <button @click="jump">点我跳转到School页面</button>
  </div>
</template>

<script>
export default {
  methods: {
    jump() {
      // query传参
      this.$router.push({
        path: "/school",
        query: {
          age: 10,
        },
      });
    },
  },
};
</script>

在School.vue里接收

  mounted() {
  console.log(this.$route.query.age);
  },

3.params和query传参的区别
(1)params只能通过name来引入路由，而query则通过path引入路由
(2)params传递过来的参数在页面刷新以后就变成了undefined，而query传过来的参数即使页面刷新也还是可以拿到值
(3)query传参会在原有的路径后面拼接上'?'+传过来的参数，而params传参则不会