为什么在 vuetify 中嵌套的 nuxt link 不起作用？

Question

我将 NuxtJS 与 Vuetify 一起使用，并且我有以下（缩短的）组件

<template>
  <v-card nuxt :to="`/article/${id}`">
    <v-card-actions>
      <v-btn active-class="no-active" text nuxt :to="`/newspaper/${newspaper.latName}`">
        <v-icon>mdi-text-box</v-icon>
        {{ newspaper.araName }}
      </v-btn>
      <v-btn text class="mr-2">
        <v-icon>mdi-clock-outline</v-icon>
        {{ since }}
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

这在浏览器控制台中给我以下警告：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example, nesting block-level elements inside, or missing. Bailing hydration and performing full client-side render.

但页面仍然有效，导航也仍然有效。如果我将其中一个 nuxt link 替换为触发路由器推送的功能，警告就会消失。

为什么会这样？

编辑：我就是这样使用这个组件的

<template>
  <span>
    <ArticleCard
      v-for="(article, i) in articles"
      :key="i"
      v-bind="article"
    ></ArticleCard>
  </span>
</template>

Answer 1

你这里有两件事：

DOM 水合作用问题，这里是，其中包含所有可用的详细信息。如果真的不起作用，请随时阅读并回来找我。但主要是，使用您的开发工具检查 DOM 并尝试查看 generated/hydrated.
您可能没有正确使用 :to 属性。这里是Vuetify documentation which is basically saying that you can check Vue router's :to prop。这个要像 :to="'home'" 或 :to="{ name: 'name' }" 一样使用。我不确定 buttonLink 的内容，但请确保这符合要求 object/string.

为什么在 vuetify 中嵌套的 nuxt link 不起作用？

Why nested nuxt link in vuetify doesn't work?

nuxt.js

vuetify.js