Nuxt Route 設置

前言

Nuxt 生成 route 的方式比較不太一樣,這邊實作順便記錄一下

起手式

在講解之前,先建立一下 Nuxt 專案吧,如果不會建立可以參考我這一篇文章

建立一個 NuxtJS 專案吧!

Route

在寫 Vue-Cli 的時候我們都必須去 router.js 去設置 router,如下

範例是 RagnarokShopV3

但是在 Nuxt 就不太一樣了,router 是自動生成的,完全不需要去動到 router.js,讓我們來看範例吧

首先當我們執行 npm run dev 的時候,Nuxt 會建立一個 .nuxt 資料夾

.nuxt

底下可以看到一個 router.js

router.js

接下來打開 router.js 並滾到下方,可以看到自動生成的 router (紅字請忽略)

自動生成

那麼它的原理是怎麼生成的呢?

生成原理

首先 Nuxt 會去讀取 pages 底下的 .vue 檔案,當前 pages 只有一個 index.vue,所以 Nuxt 只會生成一個 router

router

由此可知我們可以在底下建立一個 pages.vue 看看會發生什麼事情

pages.vue

讓我們在打開 /.nuxt/router.js 檔案看看發生何事

Image

你會發現它自動幫你生出了 router,有沒有超神奇呢?

巢狀 Route

巢狀 Route 是我們非常常使用的技巧之一,我們都會使用 childern 來指定巢狀

範例是 RagnarokShopV3

那麼在 Nuxt 該怎麼做到巢狀 router?手動寫嗎?不對,在 Nuxt 會建議盡可能讓它自動生成,不建議手動去調整,因為手動撰寫在 Nuxt 是非常麻煩的,假設我希望 pages 底下有巢狀 router,並且有 index.vue (主頁)、about.vue、pages.vue 呢?

那麼可以這樣做,直接在底下建立一個資料夾叫 pages,並在底下建立 index.vue、about.vue、pages.vue

pages

這時候我在看一下 /.nuxt/router.js 變成甚麼樣子

router.js

我們可以看到成功建立了巢狀 router,但是這邊有一個地方要注意在 pages 的資料夾根目錄上還有一個相同名稱的 pages.vue

pages.vue

資料夾名稱必須與根目錄的 pages.vue 相同,否則會出現問題,例如我根目錄刪除 pages.vue,這時候再來看 /.nuxt/router.js 會變成什麼樣子

router.js

我們可以看到這已經不是巢狀 router 了,所以這邊要記得如果要製作巢狀 router,必須建立一個與巢狀相同的 XXX.vue。

結尾

最後補充一個重點,在 nuxt 會建議你使用 <nuxt-link to="/">首頁</nuxt-link> 切換 router,當如果你是使用 <nuxt-link to="{name: 'xxx'}">首頁</nuxt-link>,請務必帶上巢狀 router 的資料夾,以上面為範例就是 <nuxt-link to="{name: 'pages-about'}">首頁</nuxt-link>

參考文獻

基础路由

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ