vue-router传参的4种方式超详细讲解

bashbash{path:'/father/son/:num',name:A,component:A}```

<router-link to="/father/son/传入的参数">父亲组件<router-link>
 子组件通过  this.$route.params.num 接受参数

<button @click="clickHand(123)">push传参</button>
  methods: {
    clickHand(id) {
      this.$router.push({
        path: `/d/${id}`
      })
    }
  }

{path: '/d/:id', name: D, component: D}

mounted () {
  this.id = this.$route.params.id
}

<button @click="ClickByName()">params传参</button>
    ClickByName() {
      this.$router.push({
        name: 'B',
        params: {
          context: '吴又可吴又可吴又可'
        }
      })
    }

{path: '/b', name: 'B', component: B}

<template>
  <div id="b">
    This is page B!
    <p>传入参数：{{this.$route.params.context}}</p>
  </div>
</template>

<button @click="clickQuery()">query传参</button>
    clickQuery() {
      this.$router.push({
        path: '/c',
        query: {
          context: '吴又可吴又可'
        }
      })
    }

{path: '/c', name: 'C', component: C}

<template>
  <div id="C">
    This is page C!
    <p>这是父组件传入的数据: {{this.$route.query.context}}</p>
  </div>
</template>