Vue 传参方法

A部分

 App.vue

<template>
  <div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/main?id=20">AAA 用query接</router-link>
    <router-link :to="'/main?id=' + 30">BBB</router-link>
    <router-link :to="'/main?id=' + 40">CCC</router-link>
    <router-link :to="'/main?id=' + 50">DDD</router-link>
    <router-link to="/main/60">EEEEEEEEEEE 用parans j接</router-link>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  components: {
     
},
  
}
</script>

<style>
 
</style>

B部分

page/Main.vue

<template>

 <!-- 显示数据
 第一方法：在template里div写入 {{$route.query.id}}  || {{$route.params.id}}

 第二种方法：   {{id}}  ==> 用props 接，需在路由设置一下 -->

  <!-- 操作数据：
  export default {
  created() {
    this.$route.params.id;
  }
}; -->



  <div>
    5644444445555555555555556666666666666
    <!-- {{$route.query.id}} -->
    <!-- {{$route.params.id}} -->
    {{id}} 

  
  </div>
</template>
 <script>
export default {
  Props: ["id"],
  created() {
    this.$route.params.id;
  }
};
</script>
<style>
</style>