前言

在使用Nuxt.js時(shí)可能會(huì)遇到一個(gè)這樣的問(wèn)題？

當(dāng)打開請(qǐng)求頁(yè)面的時(shí)候，所有頁(yè)面都被請(qǐng)求了。

這正是<router-link>組件所有的特性。

首先說(shuō)一下router-link

router-link

<router-link>是使vue項(xiàng)目具有路由功能的應(yīng)用點(diǎn)擊組件。

nuxt-link

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

正如官方所說(shuō)<nuxt-link>使用方式和用途<router-link>是一致的。

但，后面說(shuō)將來(lái)我們會(huì)為<nuxt-link>組件增加更多的功能特性，例如資源預(yù)加載，用于提升 nuxt.js 應(yīng)用的響應(yīng)速度。

當(dāng)寫這篇文章時(shí)，nuxt.js 官方已經(jīng)實(shí)現(xiàn)了如它所說(shuō)的將來(lái)功能特性。也許API文檔沒有及時(shí)更新吧！

所以特性正如上面前面的問(wèn)題。

使用<nuxt-link to"/xxx">xxx</nuxt-link>時(shí), 同時(shí)會(huì)加載所鏈接的頁(yè)面資源。

資源預(yù)加載，所以提升 nuxt.js 應(yīng)用的響應(yīng)速度。

總結(jié)

如果跳轉(zhuǎn)一個(gè)頁(yè)面需要預(yù)先加載該頁(yè)面時(shí)可以使用<nuxt-link>。

如果跳轉(zhuǎn)一個(gè)頁(yè)面需要異步加載該頁(yè)面時(shí)可以使用<router-link>，

或者使用 this.$router api。

補(bǔ)充知識(shí)：nuxt中必須要知道的一點(diǎn) 關(guān)于 nuxt-link 和 a 標(biāo)簽的區(qū)別

在nuxt項(xiàng)目中可以有兩種方式進(jìn)行路由跳轉(zhuǎn)

1、使用nuxt-link標(biāo)簽

<nuxt-link to="/shop/cart">購(gòu)物車</nuxt-link>

2、使用a標(biāo)簽

<a href="/shop/cart" rel="external nofollow" >購(gòu)物車</a>

這兩個(gè)的區(qū)別是

nuxt-link還是在現(xiàn)在的體系中進(jìn)行加載

a相當(dāng)于另外打開了一個(gè)頁(yè)面

尤其當(dāng)你使用了vuex進(jìn)行數(shù)據(jù)綁定的時(shí)候，使用nuxt-link切換到其他頁(yè)面不會(huì)感覺到數(shù)據(jù)的變化，而使用a數(shù)據(jù)會(huì)卡頓一下再顯示

以上這篇Nuxt.js nuxt-link與router-link的區(qū)別說(shuō)明就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。