Nuxt.js nuxt-link与router-link的区别说明


Posted in Javascript onNovember 06, 2020

前言

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

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

Nuxt.js nuxt-link与router-link的区别说明

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

首先说一下router-link

router-link

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

nuxt-link

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

Nuxt.js nuxt-link与router-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的区别说明

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

总结

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

如果跳转一个页面需要异步加载该页面时可以使用<router-link>,

或者使用 this.$router api。

补充知识:nuxt中必须要知道的一点 关于 nuxt-link 和 a 标签的区别

在nuxt项目中可以有两种方式进行路由跳转

1、使用nuxt-link标签

<nuxt-link to="/shop/cart">购物车</nuxt-link>

2、使用a标签

<a href="/shop/cart" rel="external nofollow" >购物车</a>

这两个的区别是

nuxt-link还是在现在的体系中进行加载

a相当于另外打开了一个页面

尤其当你使用了vuex进行数据绑定的时候,使用nuxt-link切换到其他页面不会感觉到数据的变化,而使用a数据会卡顿一下再显示

以上这篇Nuxt.js nuxt-link与router-link的区别说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
学习jQuey中的return false
Dec 18 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 Javascript
在nuxt中使用路由重定向的实例
Nov 06 #Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 #Javascript
Nuxt的路由配置和参数传递方式
Nov 06 #Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 #Javascript
Jquery Fade用法详解
Nov 06 #jQuery
nuxt静态部署打包相对路径操作
Nov 06 #Javascript
全网小程序接口请求封装实例代码
Nov 06 #Javascript
You might like
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
PHP代码优化的53个细节
2014/03/03 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php分页函数完整实例代码
2014/09/22 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
python实现kMeans算法
2017/12/21 Python
django如何自己创建一个中间件
2019/07/24 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
出纳岗位职责模板
2013/11/27 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
美化环境标语
2014/06/20 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
2014年护理部工作总结
2014/11/14 职场文书