使用vue ssr时如何将<a>用作块元素？

问题描述

我在新闻网站上使用 vue-ssr，我需要添加一个带有文章内容链接的文章卡片。 有一些这样的代码：

<router-link class="article-card" :to="{ name: 'Article',params: { id: article.id } }">
  <img :src="article.image"/>
  <div class="title">{{ article.title }}</div>
  <div class="date">{{ article.date | formatDate }}</div>
</router-link>

我在 css 中指定了 .article-card { display: block }，在客户端 vue 中一切正常。但是当我使用vue ssr时，有一个警告：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content

发生这种情况是因为 vue ssr 渲染器始终将 <a> 元素视为内联元素，即使它在 css 中被指定为块元素。我知道我可以为 tag="div" 指定 router-link，但由于 SEO，使用 <a> 元素很重要。我尝试内联指定 css 规则，但仍然出现警告。

是否有任何解决方法允许在 vue ssr 中使用 <a> 元素作为块？ 如果没有办法解决这个问题，我可以保留这个警告吗？它是否会破坏 vue ssr 中的任何内容或导致重新创建 DOM 元素的额外工作？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）