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 相关文章推荐
javascript一点特殊用法
May 28 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP 文件系统详解
2012/09/13 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
php实用代码片段整理
2016/11/12 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python实现双色球随机选号
2020/01/01 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
如何用Django处理gzip数据流
2021/01/29 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
C#公司笔试题
2014/03/28 面试题
财务情况说明书范文
2014/05/06 职场文书
公安学专业求职信
2014/07/27 职场文书
学生检讨书如何写
2014/10/30 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
感谢信模板大全
2015/01/23 职场文书