带有图像标签的 vue.js 动态路由器链接包装

【问题标题】：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>

但它们都不起作用。

提前致谢。

【问题讨论】：

【解决方案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/

【讨论】：