返回介绍

开场白

开始使用

API

配置

部署

其他

API: <nuxt-link> 组件

发布于 2019-12-01 05:33:25 字数 994 浏览 1416 评论 0 收藏 0

nuxt-link 组件用于在页面中添加链接至别的页面。

目前 <nuxt-link> 的作用和 <router-link> 一致,推荐阅读 Vue路由文档 来了解它的使用方法。

例如 (pages/index.vue):

<template>
  <div>
    <h1>Home page</h1>
    <nuxt-link to="/about">关于</nuxt-link>
  </div>
</template>

别名: <n-link>, <NuxtLink>, 和 <NLink>

Nuxt.js v2.4.0添加

为了提高Nuxt.js应用程序的响应能力,当链接将显示在视口中时,Nuxt.js将自动预获取代码分割页面。此功能的灵感来自Google Chrome Labs的quicklink.js。

要禁用链接页面的预获取,可以使用no-prefetch

<n-link to="/about" no-prefetch>About page not pre-fetched</n-link>

您可以使用router.prefetchLinks全局配置此行为。

关于prefetched-class还可用于自定义在预获取代码分割页面时添加的类。确保使用router.linkPrefetchedClass全局设置此功能。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文