【问题标题】:vue.js dynamic router link wrap with image tag带有图像标签的 vue.js 动态路由器链接包装
【发布时间】:2018-10-30 03:32:11
【问题描述】:

我正在使用 vue.js 构建一个博客,并且我正在尝试使我的图片可点击,并且在点击图片后它将定向到我的一个 vue 组件。 我被困在动态传递查询字符串(查询字符串是从 MongoDB 检索的博客内容 id 并且图像用作博客文章的缩略图。)

到目前为止我已经尝试过

<router-link to="/blogcontent/:${post.bcid}" tag="img" v-bind:src="`/static/uploads/` + post.thumbnail"></router-link>

<router-link to="{ name: 'BlogContent', params: { blogId: post.bcid }" tag="img" v-bind:src="`/static/uploads/` + post.thumbnail"></router-link>

但它们都不起作用。

提前致谢。

【问题讨论】:

    标签: vue.js vue-component vue-router


    【解决方案1】:

    首先,您的router-link 标记中有语法错误。当您在属性中传递任何 javascript 时,您需要使用 v-bind:。例如,在您的路由器链接中,您使用了to="{ name: ...}",您应该将to 属性更新为:to,注意to 标签前的冒号。

    其次,router-link 渲染一个锚标签,你可以做的是你可以有一个单独的img 标签并用路由器链接包装它。像这样的:

    <router-link :to="{ name: 'blogcontent', params: {blogId: post.bcid} }">
      <img :src="post.thumbnail" />
    </router-link>
    

    我为你创建了一个简单的小提琴:https://jsfiddle.net/iamriel/waarpq0s/1/

    【讨论】:

      猜你喜欢
      • 2016-07-12
      • 2019-08-28
      • 2018-05-11
      • 2018-08-05
      • 2020-10-20
      • 2021-10-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多