Nuxt.js - nuxt-link与router-link的差异

2024-05-11 18:52:34

前言

在使用Nuxt.js时可能会遇到一个这样的问题？

当打开请求页面的时候，所有页面都被请求了。

这正是<router-link>组件所有的特性。

首先说一下router-link

router-link

<router-link>是使vue项目具有路由功能的应用点击组件。

nuxt-link

先看一下官方api介绍<nuxt-link>

正如官方所说<nuxt-link>使用方式和用途<router-link>是一致的。

但，后面说将来我们会为<nuxt-link>组件增加更多的功能特性，例如资源预加载，用于提升 nuxt.js 应用的响应速度。

当写这篇文章时，nuxt.js 官方已经实现了如它所说的将来功能特性。也许API文档没有及时更新吧！

所以特性正如上面前面的问题。

使用<nuxt-link to"/xxx">xxx</nuxt-link>时, 同时会加载所链接的页面资源。

资源预加载，所以提升 nuxt.js 应用的响应速度。

总结

如果跳转一个页面需要预先加载该页面时可以使用<nuxt-link>。

如果跳转一个页面需要异步加载该页面时可以使用<router-link>，或者使用 this.$router api。

转载于:https://juejin.im/post/5c9b3e5d5188251bec417e70

Nuxt.js - nuxt-link与router-link的差异相关推荐

[Nuxt.js]Nuxt项目启动如何跳过“Are you interested in participation?”
每次运行Nuxt项目都会提示"Are you interested in participation?(Y/n)" 真的是有够讨厌的呐,怎么办??? 第一种方法nuxt.confi ...
[Nuxt.js]Nuxt项目启动跳过“Are you interested in participation?”
nuxt.config.js的module.exports = {}中添加 telemetry:false,
imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈
项目说明 > [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例.实现了消息发送.图片/视频预览.下拉刷新/长按弹窗.朋 ...
老弟，来了？VUE+Nuxt.js+Koa+Vuex入门教程（一）仿写一个cnode网站
if(有工作){if(工作地址 == "深圳" || 工作地址 == "广州" ){do(请联系作者,qq:1172081598)} } 何为Nuxt.js N ...
html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面
1.项目简介 Nuxt.js是目前比较热门的服务端渲染SSR框架.凭借其更好的SEO.更快的内容到达时间(*首屏渲染速度快*) 加之基于Vue.js技术开发,更易于上手,获得了很多技术开发者的青睐. ...
nuxt.js的核心代码_Nuxt.js中的通用应用程序代码结构
nuxt.js的核心代码 by Krutie Patel 通过克鲁蒂·帕特尔(Krutie Patel) Nuxt.js中的通用应用程序代码结构 (Universal application code ...
Nuxt.js 开发SSR(服务端渲染)Web应用
1. 初识 Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架. 与 vuepress 的关系: Nuxt.js 能够胜任 VuePress 的功能,但它专为构建应用程序而设计, ...
Nuxt.js 服务端渲染从安装到部署
Nuxt.js 服务端渲染方案了解 Nuxt.js 的作用掌握 Nuxt.js 中的路由掌握 layouts.pages 以及 components 的区别能够在 Nuxt.js 项目中使用第 ...
基于 vue.js 的 SSR 技术 — Nuxt.js
为什么要使用Nuxt.js Nuxt 基于一个强大的模块化架构.你可以从 50 多个模块中进行选择,让你的开发变得更快.更简单.对 PWA 的支持.添加谷歌分析到你的网页或生成网站地图,这些功能都无需 ...
nuxt.js常见问题总结
最近在开发我司一项目,用的是nuxt.js开发的,nuxt版本号:2.14.8. 主要记录一下,我在这个项目中一些用到的东西吧,地址:http://www.lawlawing.com/ 感觉基本包含了 ...

最新文章

热门文章