方法一：直接在路由路徑後面加引數

customeDetail(id){

console.log("id",id);

this.$router.push({

path:"/custome/customeDetailPage/${id}",

})

},

需要對應路由配置如下：

{

path:"/custome/customeDetailPage/:id",

component:CDetailPage

},

//需要在path中新增/:id來對應引數

//詳情頁獲取傳遞的引數

methods:{

getParams(){

let routerParams = this.$route.params.id;

this.customId = routerParams;

console.log("id",routerParams);

},

},

created(){

this.getParams()

}

方法二:利用name屬性來匹配路由，然後透過params傳遞引數

1 //列表頁面傳引數

2 customeDetail(id){

3 console.log("id",id);

4 this.$router.push({

5 name:"CDetailPage", //注意一定要用name屬性匹配路由

6 params:{

7 dataObj:id

8 }

9 })

10 },

11 //對應路由配置

12 {

13 path:"/custome/customeDetailPage",

14 name:"CDetailPage",

15 component:CDetailPage

16 },

17 //詳情頁面接收引數

18 methods:{

19 getParams(){

20 let routerParams = this.$route.params.dataObj;

21 this.customId = routerParams;

22 console.log("id",routerParams);

23 },

24

25 },

26 created(){

27 this.getParams()

28 }

第三種方法：透過path匹配路由，然後透過query傳遞引數

//列表頁面傳參

customeDetail(id){

console.log("id",id);

this.$router.push({

path:"/custome/customeDetailPage",

query:{

name:"id",

dataObj:id

}

})

},

//路由配置，name屬性可有可無

{

path:"/custome/customeDetailPage",

component:CDetailPage

}, //我寫的時候是沒有用name屬性

//詳情頁獲取屬性

methods:{

getParams(){

let routerParams = this.$route.query.dataObj;

this.customId = routerParams;

console.log("id",routerParams);

},

},

created(){

this.getParams()

}

這是query傳參是路由顯示的引數