Vue路由页面跳转传参

编程式导航

我们可以通过this.$router.push()这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转

从A页面跳转到B页面，并传递参数到B页面
A页面

 toB(id) {
      // console.log(id);
      this.$router.push({
        name: "B",
        query: {
          id: id
        }
      });
    },

B页面接收A页面传来的参数

mounted(){this.id = this.$route.query.id;}

路由导航两种方式：

标签导航：标签导航是通过转义为标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；
从Home页面跳到About页面，并传递参数id
Home页面

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <router-link :to="{ name: 'About', query: { id: 123 }}">跳转到about，并传递id</router-link>
  </div>
</template

About页面

<template>
  <div class="about">
    <h1>id----{{id}}</h1>
  </div>
</template>

<script>
export default {
  name: "About",
  components: {},
  data() {
    return {
      id:0
    };
  },
  mounted(){
    this.id = this.$route.query.id
    console.log(this.id)
  }
};
</script>