您正在浏览 Nuxt 2 文档。前往 Nuxt 3 文档， 或了解更多关于 Nuxt 2 长期支持。

Nuxt 提供的组件

Nuxt 提供了一些重要的内置组件，在构建应用时非常有用。这些组件全局可用，意味着使用时无需导入。

以下将分别介绍各个内置组件。

Nuxt 组件

<Nuxt> 组件用于显示页面组件。基本上，该组件会根据当前显示的页面替换为页面组件中的内容。因此，将 <Nuxt> 组件添加到布局中非常重要。

layouts/default.vue
<template>
  <div>
    <div>My nav bar</div>
    <Nuxt />
    <div>My footer</div>
  </div>
</template>
<Nuxt> 组件只能在布局 内部使用。

<Nuxt> 组件可以接收 nuxt-child-key 属性。该属性会传递给 <RouterView>，使过渡效果在动态页面中正常工作。

处理 <RouterView> 内部 key 属性有两种方式：

  1. 在 <Nuxt> 组件上使用 nuxtChildKey 属性
layouts/default.vue
<template>
  <div>
    <Nuxt :nuxt-child-key="someKey" />
  </div>
</template>
  1. 在 页面 组件中将 key 选项添加为 string 或 function 
export default {
  key(route) {
    return route.fullPath
  }
}

NuxtChild 组件

该组件用于在嵌套路由中显示子组件。

示例：

-| pages/
---| parent/
------| child.vue
---| parent.vue

该文件树会生成以下路由：

;[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

要显示 child.vue 组件，需要在 pages/parent.vue 内部插入 <NuxtChild> 组件：

pages/parent.vue
<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtChild :foobar="123" />
  </div>
</template>

keep-alive

<Nuxt> 组件和 <NuxtChild> 组件都支持 keep-alive 和 keep-alive-props。

关于 keep-alive 和 keep-alive-props 的详情，请参阅 Vue.js 文档 。
layouts/default.vue
<template>
  <div>
    <Nuxt keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- 会被转换为以下内容 -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>
pages/parent.vue
<template>
  <div>
    <NuxtChild keep-alive :keep-alive-props="{ exclude: ['modal'] }" />
  </div>
</template>

<!-- 会被转换为以下内容 -->
<div>
  <KeepAlive :exclude="['modal']">
    <RouterView />
  </KeepAlive>
</div>

<NuxtChild> 组件也可以接收普通 Vue 组件的属性。

<template>
  <div>
    <NuxtChild :key="$route.params.id" />
  </div>
</template>

要查看示例，请参阅 nested-routes 示例 。

要在应用的页面之间导航，应使用 <NuxtLink> 组件。该组件已包含在 Nuxt 中，无需像其他组件一样导入。它类似于 HTML 的 <a> 标签，但使用 to="/about" 代替 href="/about"。如果之前使用过 vue-router，可以将 <NuxtLink> 视为 <RouterLink> 的替代品。

链接到 pages 文件夹中 index.vue 页面的简单示例：

<template>
  <NuxtLink to="/">Home page</NuxtLink>
</template>

<NuxtLink> 组件应用于所有内部链接，即站点内页面的所有链接都应使用 <NuxtLink>。<a> 标签应用于所有外部链接，即链接到其他网站时应使用 <a> 标签。

<template>
  <div>
    <h1>Home page</h1>
    <NuxtLink to="/about"
      >About (internal link that belongs to the Nuxt App)</NuxtLink
    >
    <a href="https://v2.nuxt.com">External Link to another page</a>
  </div>
</template>
如果想了解更多关于 <RouterLink> 的信息，请阅读 Vue Router 文档 。
<NuxtLink> 还支持智能预获取 。

Nuxt 自动支持智能预获取。当检测到链接在视口中或滚动时可见，Nuxt 会预获取页面的 JavaScript，以便用户点击链接时立即可用。Nuxt 仅在浏览器空闲时加载资源，如果连接离线或只有 2g 连接则跳过预获取。

禁用特定页面的预获取

但有时可能需要禁用某些链接的预获取，例如页面有大量 JavaScript、有许多需要预获取的页面，或需要加载大量第三方脚本时。要禁用特定链接的预获取，可以使用 no-prefetch 属性。从 Nuxt v2.10.0 起，也可以将 prefetch 属性设置为 false。

<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>

全局禁用预获取

要禁用所有链接的预获取，将 prefetchLinks 设置为 false：

nuxt.config.js
export default {
  router: {
    prefetchLinks: false
  }
}

从 Nuxt v2.10.0 起，即使将 prefetchLinks 设置为 false，如果想预获取特定链接，可以使用 prefetch 属性：

<NuxtLink to="/about" prefetch>About page pre-fetched</NuxtLink>

linkActiveClass

linkActiveClass 的工作方式与 vue-router 中激活链接的类相同。如果想显示哪些链接处于激活状态，只需为 nuxt-link-active 类创建 CSS 样式即可。

.nuxt-link-active {
  color: red;
}
这段 CSS 可以添加到过渡组件、特定页面或布局，或 main.css 文件中。

如果需要，也可以将类名设置为其他名称。可以在 nuxt.config.js 文件的 router 属性中修改 linkActiveClass。

export default {
  router: {
    linkActiveClass: 'my-custom-active-link'
  }
}
此选项直接设置到 vue-router 的 linkActiveClass。详情请参阅 Vue Router 文档 。

linkExactActiveClass

linkExactActiveClass 的工作方式与 vue-router 中精确激活链接的类相同。如果想显示哪些链接完全匹配并处于激活状态，只需为 nuxt-link-exact-active 类创建 CSS 样式即可。

.nuxt-link-exact-active {
  color: green;
}
这段 CSS 可以添加到过渡组件、特定页面或布局，或 main.css 文件中。

如果需要，也可以将类名设置为其他名称。可以在 nuxt.config.js 文件的 router 属性中修改 linkExactActiveClass。

nuxt.config.js
export default {
  router: {
    linkExactActiveClass: 'my-custom-exact-active-link'
  }
}
此选项直接设置到 vue-router 的 linkExactActiveClass。详情请参阅 Vue Router 文档 。

linkPrefetchedClass

使用 linkPrefetchedClass 可以为所有已预获取的链接添加样式。这非常适合在修改默认行为后测试哪些链接已被预获取。linkPrefetchedClass 默认禁用，要启用它，需要在 nuxt-config.js 文件的 router 属性中添加。

nuxt.config.js
export default {
  router: {
    linkPrefetchedClass: 'nuxt-link-prefetched'
  }
}

然后可以为该类添加样式：

.nuxt-link-prefetched {
  color: orangeRed;
}
本例中使用了 nuxt-link-prefetched 类，但可以使用任何喜欢的名称。

client-only 组件

该组件用于有意仅在客户端渲染组件。要仅在客户端导入组件，请在客户端专用插件中注册该组件。

pages/example.vue
<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- 该组件仅在客户端渲染 -->
      <comments />
    </client-only>
  </div>
</template>

在客户端挂载 <client-only /> 之前，使用插槽作为占位符。

pages/example.vue
<template>
  <div>
    <sidebar />
    <client-only>
      <!-- 该组件仅在客户端渲染 -->
      <comments />

      <!-- 加载指示器在服务端渲染 -->
      <template #placeholder>
        <comments-placeholder />
      </template>
    </client-only>
  </div>
</template>
有时在服务器渲染的页面中，即使使用 $nextTick，<client-only> 内的 $refs 也可能未准备好，此时需要多次调用 $nextTick：
page.vue
mounted(){
  this.initClientOnlyComp()
},
methods: {
  initClientOnlyComp(count = 10) {
    this.$nextTick(() => {
      if (this.$refs.myComp) {
        //...
      } else if (count > 0) {
        this.initClientOnlyComp(count - 1);
      }
    });
  },
}
如果使用的是 Nuxt < v2.9.0，请使用 <no-ssr> 代替 <client-only>。
Edit this page on GitHub Updated at Tue, Apr 14, 2026