[筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 7

章節連結

前端框架御三家之一的 Vue,在 2020 年第四季迎來的第三代版本,代號為 One Piece。雖說已略為上手 2.0 版,決定藉由 HiSKIO 2020 Vue3 專業職人 的課程,來加速自己的熟悉程度。這篇會筆記下 Nuxt 中關於嵌套和動態路由的配置。

vue.js logo vue


課程相關資訊

[連結]:https://hiskio.com/courses/419/lectures/20830

本篇範圍:Chapter 4 ( Nuxt – 自動化 Router 配置 ) ,一共有 10 篇

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。


筆記

1. 若要進行嵌套式路由,僅需要在 pages 內加入對應頁面檔名的資料夾 ( 例如 About.vue 搭配 About 資料夾 ),並在裡面放置要嵌套內容的 .vue 即可。預設會讀取資料夾內的 Index.vue
2. 嵌套的路由要使用 <NuxtChild />,同時還要注意 CSS 的樣式階層,是跟 SPA 時全部掛在 #app 下不同
3. 動態路由:以 About.vue 為例:在 pages 下新增一個 About 資料夾,裡面放置一個以 “_” 開頭的 .vue (例如 _id.vue)。那麼你就可以在 _id.vue 裡面,用 asyncData(context) 的方法中的 context.params.id ,就可以取得動態路由中的變數


系列文章

  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 9
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 8
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 6
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 5
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 4
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 3
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 15
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 14
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 13
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 12
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 10
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 5
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 4
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 3
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 9-2
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 9
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 8
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 7
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 6
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 5
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 4
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 3
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 16
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 14
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 13
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 12
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 10
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 1
  • 按讚加入粉絲團

    延伸閱讀