VUE中利用router-link用法

最新推荐文章于 2024-07-13 13:07:05 发布

weixin_42542422

最新推荐文章于 2024-07-13 13:07:05 发布

阅读量1k

点赞数 1

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42542422/article/details/106722696

版权

在Vue开发中，经常需要通过ajax获取数据并使用v-for循环显示。以去哪儿网为例，每个热门景点需要独立点击并跳转到对应页面。传统的做法是在li元素上添加a标签实现路由跳转，但这种方法无法精确跳转。为优化，可以将li元素替换为router-link，并设置tag属性为'li'，同时结合:v-for指令和`:to="'/detail'+item.id"`，这样就能实现每个景点链接到其对应的详细页面。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

weixin_42542422

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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="
复制链接

扫一扫