如何解决Router-link 动态 vueJS
我是 vueJS 的新手。我正在创建一个新闻系统来训练自己。我有点问题。这是让我可以转到文章详细信息的链接:
<router-link :to="{ name: 'Blog Details',params: { id: 1 }}"><img v-bind:src="postThumbnail" v-bind:alt="title"></router-link>
此链接所在的组件有多个道具,包括文章 ID (actu_id)。
在文章链接中,我希望参数中的 id 不是硬“1”,而是 actu_id。
我不知道该怎么办。
解决方法
在构建此类内容时,首先要考虑数据如何到达您的页面。假设您有多个博客文章,在这里使用循环可能是最有效的。将它们保存在数组中的数据中:
blogs: [
{
name: "Post 1",id: 1,thumbnail: "agsrgsghr.jpg",},{
name: "Post 2",id: 2,thumbnail: "agsrgsghr2.jpg",],
并且您可以使用模板文字来设置路由器链接参数
<div v-for="blog in blogs" :key="blog.id">
<router-link :to="{ name: `${blog.name}`,params: { id: `${blog.id}` } }"
><img :src="blog.thumbnail" :alt="blog.name"
/></router-link>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。