vue.js动态路由器链接包装与图像标记

Question

我正在使用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>

但它们都不起作用。

提前谢谢。

Answer 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/