时间戳

首页 > 解决方案 > 为什么 vuetify 中的嵌套 nuxt 链接不起作用？

nuxt.js - 为什么 vuetify 中的嵌套 nuxt 链接不起作用？

问题描述

我正在将 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 警告]：客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。这可能是由不正确的 HTML 标记引起的，例如，在内部嵌套块级元素或丢失。Bailing 水合作用并执行完整的客户端渲染。

但页面仍然有效，导航仍然有效。如果我用触发路由器推送的功能替换 nuxt 链接之一，警告就会消失。

为什么会这样？

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

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

标签： nuxt.jsvuetify.js

解决方案

你在这里有两件事：

  • DOM 水合问题，这是一个相关问题，包含所有可用的详细信息。随意阅读它，如果它真的不起作用，请在之后回来找我。但主要是，使用您的开发工具检查 DOM 并尝试查看生成/水合的内容。
  • 您可能:to在这里没有正确使用道具。这是Vuetify 文档，基本上是说您可以检查Vue 路由器的 :to prop。这个要像:to="'home'"or一样使用:to="{ name: 'name' }"。我不确定的内容，buttonLink但请确保它遵循所需的对象/字符串。

推荐阅读