本篇文章為大家展示了Nuxt.js中router-link與nuxt-link有哪些區(qū)別,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。

前言
在使用Nuxt.js時(shí)可能會(huì)遇到一個(gè)這樣的問題?
當(dāng)打開請求頁面的時(shí)候,所有頁面都被請求了。

這正是<router-link>組件所有的特性。
首先說一下router-link
router-link
<router-link>是使vue項(xiàng)目具有路由功能的應(yīng)用點(diǎn)擊組件。
nuxt-link
先看一下官方api介紹<nuxt-link>

正如官方所說<nuxt-link>使用方式和用途<router-link>是一致的。
但,后面說將來我們會(huì)為<nuxt-link>組件增加更多的功能特性,例如資源預(yù)加載,用于提升 nuxt.js 應(yīng)用的響應(yīng)速度。
當(dāng)寫這篇文章時(shí),nuxt.js 官方已經(jīng)實(shí)現(xiàn)了如它所說的將來功能特性。也許API文檔沒有及時(shí)更新吧!
所以特性正如上面前面的問題。
使用<nuxt-link to"/xxx">xxx</nuxt-link>時(shí), 同時(shí)會(huì)加載所鏈接的頁面資源。

資源預(yù)加載,所以提升 nuxt.js 應(yīng)用的響應(yīng)速度。
總結(jié)
如果跳轉(zhuǎn)一個(gè)頁面需要預(yù)先加載該頁面時(shí)可以使用<nuxt-link>。
如果跳轉(zhuǎn)一個(gè)頁面需要異步加載該頁面時(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">購物車</nuxt-link>
2、使用a標(biāo)簽
<a href="/shop/cart" rel="external nofollow" >購物車</a>
這兩個(gè)的區(qū)別是
nuxt-link還是在現(xiàn)在的體系中進(jìn)行加載
a相當(dāng)于另外打開了一個(gè)頁面
尤其當(dāng)你使用了vuex進(jìn)行數(shù)據(jù)綁定的時(shí)候,使用nuxt-link切換到其他頁面不會(huì)感覺到數(shù)據(jù)的變化,而使用a數(shù)據(jù)會(huì)卡頓一下再顯示
上述內(nèi)容就是Nuxt.js中router-link與nuxt-link有哪些區(qū)別,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享題目:Nuxt.js中router-link與nuxt-link有哪些區(qū)別-創(chuàng)新互聯(lián)
本文地址:http://chinadenli.net/article30/hjppo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、ChatGPT、外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、服務(wù)器托管、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容