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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
利用jQuery实现打字机字幕效果实例代码
Sep 02 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
javascript 对象 与 prototype 原型用法实例分析
Nov 11 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的session过期设置
2013/06/29 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
jquery radio 操作代码
2011/03/16 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python 高阶函数简单介绍
2021/02/19 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
如何利用find命令查找文件
2015/02/07 面试题
J2EE系统只能是基于web
2015/09/08 面试题
数控专业推荐信范文
2013/12/02 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
企业授权委托书范本
2014/04/02 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript