VUE中利用router-link用法

vue开发APP中,往往会在一个区块中 利用ajax获取多种数据,然后再利用v-for将其循环到这个区块里.
比如饿了么的店铺,去哪儿网的旅游推荐.等等

就以去哪儿网举例

每一个热门景点都是可以单独点击,并且跳转对应的页面
一般的router跳转方法都是在 这个li盒子上套上一个

标签,这样就可以进行路由跳转

<router-link to="/detail">
    <li class="item border-bottom" v-for="item in list" :key="item.id">
        <img class="item-img" :src="item.imgUrl">
      <div class="item-info">
        <p class="item-title">{{item.title}}</p>
        <p class="item-desc">{{item.desc}}~</p>
        <button class="item-button">查看详情</button>
      </div>
    </li>
    </router-link>

,但这并不能跳转到指定界面,所以就需要更好的方法.

<router-link tag="li"
    :to="'/detail/'+item.id"
    class="item border-bottom" v-for="item in list" :key="item.id">
        <img class="item-img" :src="item.imgUrl">
      <div class="item-info">
        <p class="item-title">{{item.title}}</p>
        <p class="item-desc">{{item.desc}}~</p>
        <button class="item-button">查看详情</button>
      </div>
    </router-link>

进行优化,将li标签直接改成 router-link 标签,然后加入 tag=“li” 渲染成li标签,
再添加 :to="’/detail’+item.id" 就可以配合 v-for指令 单独的在每一个陆游景点下router该景点对应的页面.