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

前言

在使用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