在日常開發中有一種場景非常常見，比如有一百個列表鏈接，點擊鏈接後進入的頁面模板佈局都是一樣的，只是簡單的有些數據不一樣，所以在vue中可以利用vue-router的動態路由和路由傳值實現，具體如下：
1，在配置模板頁面的路由的時候要用動態路由，並開啓props模式：
{
path:'/auction_detail_index/:id',
component:auction_detail_index,
props: true,
},
2，在鏈接跳轉頁面要把id傳給目標模板頁面：
<li v-for="item in index_paimai">
<div>
//item.to就是要跳轉的模板頁面地址，所不同的是需要傳iid,由於此是異步加載的數據，需要在接口配置中來配置
<a :href="item.to">
<img :src="require('../assets/img/project1.png')" alt="">
</a>
</div>
</li>
//接口配置中來配置如下：（/0就是要傳的id）
"to":"auction_detail_index/0"
這一步配置完後點擊就會跳轉到同一模板的相應的動態路由頁面（比如點擊上面的src就會跳轉到auction_detail_index/0頁面，其實是同一模板頁面auction_detail_index）
3，跳轉後需要在auction_detail_index頁面接收這個傳過來的id：
export default {
//利用props接收id
props:['id'],
created(){
this.$http.get('api/auctions').then(
(res)=>{
//在created鉤子函數中利用id獲取異步加載的數據
let detail_num=res.data.data.details[this.id]
console.log(detail_num)
this.detail_top=detail_num
},
(error)=>{
console.log(error)
}
),
}
4，接口配置，在配置的時候要配置成數組套數組的模式：（不能寫成數組套對象模式）
"auctions":{
"details":[
[{
"bianhao":"#000001",
"title1":"世紀大戰拍賣會專場",
"title2":"2020年10月05日 上午10:30-下午6:00"
}],
[{
"bianhao":"#000002",
"title1":"無以倫比的一次慈善拍賣",
"title2":"2020年10月05日 上午10:30-下午6:00"
}]
]
}
ok到此就實現了同一模板渲染不同數據的效果