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

Logo

前往低代码交流专区

更多推荐