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。
補充知識：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的區別說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。