利用vue-router的动态路由和路由传值实现同一模板渲染不同数据

在日常开发中有一种场景非常常见，比如有一百个列表链接，点击链接后进入的页面模板布局都是一样的，只是简单的有些数据不一样，所以在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到此就实现了同一模板渲染不同数据的效果