Nuxt.js nuxt-link與router-link的區(qū)別說明
前言
在使用Nuxt.js時可能會遇到一個這樣的問題？
當(dāng)打開請求頁面的時候，所有頁面都被請求了。
這正是<router-link>組件所有的特性。
首先說一下router-link
router-link
<router-link>是使vue項目具有路由功能的應(yīng)用點擊組件。
nuxt-link
先看一下官方api介紹<nuxt-link>
正如官方所說<nuxt-link>使用方式和用途<router-link>是一致的。
但，后面說將來我們會為<nuxt-link>組件增加更多的功能特性，例如資源預(yù)加載，用于提升 nuxt.js 應(yīng)用的響應(yīng)速度。
當(dāng)寫這篇文章時，nuxt.js 官方已經(jīng)實現(xiàn)了如它所說的將來功能特性。也許API文檔沒有及時更新吧！
所以特性正如上面前面的問題。
使用<nuxt-link to"/xxx">xxx</nuxt-link>時, 同時會加載所鏈接的頁面資源。
資源預(yù)加載，所以提升 nuxt.js 應(yīng)用的響應(yīng)速度。
總結(jié)
如果跳轉(zhuǎn)一個頁面需要預(yù)先加載該頁面時可以使用<nuxt-link>。
如果跳轉(zhuǎn)一個頁面需要異步加載該頁面時可以使用<router-link>，
或者使用 this.$router api。
補充知識：nuxt中必須要知道的一點 關(guān)于 nuxt-link 和 a 標簽的區(qū)別
在nuxt項目中可以有兩種方式進行路由跳轉(zhuǎn)
1、使用nuxt-link標簽
<nuxt-link to="/shop/cart">購物車</nuxt-link>
2、使用a標簽
<a href="/shop/cart" rel="external nofollow" >購物車</a>
這兩個的區(qū)別是
nuxt-link還是在現(xiàn)在的體系中進行加載
a相當(dāng)于另外打開了一個頁面
尤其當(dāng)你使用了vuex進行數(shù)據(jù)綁定的時候，使用nuxt-link切換到其他頁面不會感覺到數(shù)據(jù)的變化，而使用a數(shù)據(jù)會卡頓一下再顯示
以上這篇Nuxt.js nuxt-link與router-link的區(qū)別說明就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue-自定義組件傳值的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
mixins（混入）是一種分發(fā)?Vue?組件中可復(fù)用功能的非常靈活的方式，這篇文章主要為大家介紹了mixins混入的介紹和使用，需要的可以參考下2023-08-08
這篇文章主要介紹了vue組件內(nèi)部引入外部js文件的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要給大家介紹了關(guān)于Vue簡易版無限加載組件實現(xiàn)原理與示例代碼的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-07-07
vue項目實現(xiàn)一鍵網(wǎng)站換膚效果實例(webpack-theme-color-replacer的使用)
換皮膚一般都是點擊一個按鈕彈出一些皮膚的選項,選中選項后皮膚生效,下面這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)一鍵網(wǎng)站換膚效果的相關(guān)資料,文中主要介紹的是webpack-theme-color-replacer的使用,需要的朋友可以參考下2023-02-02
在本篇文章里小編給大家分享了關(guān)于VUE中使用MUI方法和步驟，有需要的朋友們可以學(xué)習(xí)參考下。2019-02-02
vue實現(xiàn)點擊導(dǎo)航欄滾動頁面到指定位置的功能(推薦)
這篇文章主要介紹了vue實現(xiàn)點擊導(dǎo)航欄滾動頁面到指定位置的功能(推薦),步驟一是是通過獲取不同板塊的滾輪高度,步驟二通過編寫執(zhí)行滾動操作的函數(shù),結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-11-11
vue實現(xiàn)壓縮圖片預(yù)覽并上傳功能（promise封裝）
這篇文章主要為大家詳細介紹了vue實現(xiàn)壓縮圖片預(yù)覽并上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
本篇文章主要介紹了詳解Vue微信公眾號開發(fā)踩坑全記錄，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了Vue中失去焦點時所觸發(fā)的事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06