快捷導(dǎo)航

Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)

更新時(shí)間：2020年11月06日 11:14:39 作者：qq_42208679

這篇文章主要介紹了Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

路由跳轉(zhuǎn)代碼如下：

<ul>
 <li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li>
 <li><nuxt-link :to="{name:'new-new'}">NEWS page</nuxt-link></li>
 <li><nuxt-link :to="{name:'plays-play'}">PLAY page</nuxt-link></li>
</ul>

注意說(shuō)明：

to 前面有冒號(hào)“ : ”

to 后面跟的是路徑比如“/page/index”(可以跟字符串或?qū)ο?同上↑

補(bǔ)充知識(shí)：nuxt的 nuxt-link 有個(gè)坑

如果你跟著nuxt的案例走，記住，所以目錄比如 PAGES 目錄你最好小寫(xiě) pages 所有目錄都小寫(xiě)

因?yàn)?當(dāng)你敲下面哪行代碼時(shí)

<nuxt-link :to="{name: 'posts-id',params:{ id: post.id }}">{{ post.title }}</nuxt-link>

name其實(shí)指向的是路由，而路由死活區(qū)分大小寫(xiě)的注意 to后面區(qū)分大小寫(xiě)?。?！

所以如果你目錄是大寫(xiě)的 PAGES

以上代碼要寫(xiě)成

<nuxt-link :to="{name: 'POSTS-id',params:{ id: post.id }}">{{ post.title }}</nuxt-link>

以上這篇Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3中的toRef和toRefs的區(qū)別和用法示例小結(jié)
toRef和toRefs可以用來(lái)復(fù)制reactive里面的屬性然后轉(zhuǎn)成 ref,它保留了響應(yīng)式,也保留了引用,也就是你從 reactive 復(fù)制過(guò)來(lái)的屬性進(jìn)行修改后,除了視圖會(huì)更新,原有 ractive 里面對(duì)應(yīng)的值也會(huì)跟著更新,本文介紹Vue3中toRef和toRefs的區(qū)別和用法,需要的朋友可以參考下
2024-08-08
Vue中$refs的用法詳解
這篇文章主要介紹了Vue中$refs的用法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-06-06
淺談Vue初學(xué)之props的駝峰命名
這篇文章主要介紹了淺談Vue初學(xué)之props的駝峰命名，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
Vue中引入echarts的步驟及折線(xiàn)圖、柱狀圖常見(jiàn)配置項(xiàng)
這篇文章主要介紹了Vue中引入echarts的步驟及折線(xiàn)圖、柱狀圖常見(jiàn)配置項(xiàng),需要的朋友可以參考下
2023-11-11
Vue+OpenLayer為地圖添加風(fēng)場(chǎng)效果
這篇文章主要為大家展示了一個(gè)demo，即利用Vue和OpenLayer在地圖上面添加風(fēng)場(chǎng)效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2022-04-04
深入理解vue中的$set
這篇文章主要介紹了深入理解vue中的$set,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
vue實(shí)現(xiàn)新聞?wù)故卷?yè)的步驟詳解
最近小編遇到這樣的需求，要實(shí)現(xiàn)一個(gè)新聞?wù)故卷?yè)功能，剛接到這樣的需求還真是一頭霧水，不知從哪入手，今天小編通過(guò)實(shí)例代碼給大家介紹下vue實(shí)現(xiàn)新聞?wù)故卷?yè)的步驟詳解，感興趣的朋友跟隨小編一起看看吧
2019-04-04
Element-ui 自帶的兩種遠(yuǎn)程搜索(模糊查詢(xún))用法講解
這篇文章主要介紹了Element-ui 自帶的兩種遠(yuǎn)程搜索(模糊查詢(xún))用法講解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法
這篇文章主要介紹了vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-12-12
Vue不能檢測(cè)到數(shù)據(jù)變化的幾種情況說(shuō)明
這篇文章主要介紹了Vue不能檢測(cè)到數(shù)據(jù)變化的幾種情況說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08