router中路由配置

分兩種方式進行舉例：

第一種是params傳參，第二種是query傳參

 {
   path: 'homeDetails/:id',//params傳參
   name:'homeDetails'
   component: () =>import ('@/views/home/homeDetails.vue'),
   //子路由的絕對路徑
  },

 {
   path: 'homeDetails/',//query傳參
   name:'homeDetails'
   component: () =>import ('@/views/home/homeDetails.vue'),
   //子路由的絕對路徑
  },
 

父元件home點選傳參

// params傳參
<router-link to="/homeDetails/12345"></router-link>
<router-link to="{name:'homeDetails',params:{id:12345}"></router-link>
//切記名字用name,不能用path

//query傳參
<router-link to="/homeDetails?id=12345"></router-link>
<router-link to="{path:'/homeDetails',query:{id:12345}"
 
></router-link>
<router-link to="{name:'homeDetails',query:{id:12345}"></router-link>

子元件homeDetails接受引數

子元件使用this.$route.params.id來接收路由引數

// 子元件使用this.$route.params.id來接收路由引數
<template>
 <div><span>我是從父元件傳遞過來的id：</span>{{this.$route.params.id}}</div>
  //或
 
 
<div><span>我是從父元件傳遞過來的id：</span>{{id}}</div>
</template>
<script>
 export default{
   data(){
    id:''
   },
   mounted(){
    this.id = this.$route.params.id  //12345
    this.id = this.$route.query.id  //12345
   }
 } 
</script>