邊緣邊緣人的技術筆記
0%

Nuxt - 配置 nuxt 的路由

發表於 分類於 ， Disqus：

建議這篇文章的讀者先具備 vue-router 的相關知識，會看的比較懂。如果還不熟悉的話，建議可以先認識一下 vue-router。

Nuxt 的路由其實是使用 vue-router 製作，但他提供更簡易的方法設置，讓你不用自己寫 vue-router 的代碼。

一般路由

首先請在 /pages 下新增一個 info.vue，隨便寫些內容。
接著到瀏覽器請求 http://localhost:3000/info，你就會看到 info.vue 的內容。是不是很簡單呢？

假設你的 pages 目錄是長這樣

1
2
3
pages/
  index.vue
  info.vue

那麼 .vue 檔案的名稱，就會變成路由的名稱，若想成是 vue-router 的配置的話，他就像底下這樣：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  routes: [
    {
      path: "/",
      name: "index",
      component: Index
    },
    {
      path: "/info",
      name: "info",
      component: Info
    }
  ]
}

進一步的，如果要製作 /info/detail 這個路由，你的目錄結構要這樣設定：

1
2
3
4
pages/
  index.vue
  info/ => info 變成一個資料夾了
    detail.vue

但是，如果這時候請求 /info 這個路由的話，你會看見 Page not found 的錯誤。
因此，想保持 /info 也有頁面的話：

1
2
3
4
5
pages/
  index.vue
  info/
    index.vue
    detail.vue

這樣一來，請求 /info 的時候，就可以看到 /pages/info/index.vue 的內容囉。

練習的小技巧

如果有執行過 npm run dev 的話，專案的根目錄中應該會有一個 .nuxt 資料夾，他是實際運行的 code。
打開後第一層，你就可以看到 router.js，裏頭就有你目前的路由設置。
你可以一邊修改 pages 目錄，一邊觀察 router.js 的變化。

動態路由

有時候我們希望用相同頁面，根據不同的使用者 ID，顯示出不同的內容。這種時候就可以用到動態路由。
動態路由就是長這樣的東西： /user/_id。
如果今天使用者請求的是 /user/123 的話，那我們就可以取得 {id: 123} 這樣的資料，再利用這個參數呼叫 API。

這個路由，在 Nuxt 中設置方法是：

1
2
3
pages/
  user/
    _id.vue

如果你希望沒有 id，只進入 /user 的時候也有頁面的話，那麼你可以在 /pages/user 下加上一個 index.vue

1
2
3
4
pages/
  user/
    index.vue
    _id.vue

進一步的，如果你想要做 /user/:id/info 的時候，則可以把 _id 變成一個目錄：

1
2
3
4
5
6
pages/
  user/
    index.vue
    _id/
      index.vue
      info.vue

這個結構對應的 router 設置應該是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  routes: [
    { 
      path: "/user",
      name: "user",
      component: User
    },
    { 
      path: "/user/:id",
      name: "user-id",
      component: UserId
    },
    { 
      path: "/user/:id/info",
      name: "user-id-info",
      component: Info
    },
  ]
}

巢狀路由

在一般的 vue-router 的寫法中，巢狀路由是像這樣的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  routes: { 
    path: "/article",
    name: "article",
    component: Article,
    children: [
      {
        path: "author",
        name: "article-author",
        component: Author
      }
    ]
  }
}

而在 .vue 中，我們可以用 <router-view> 使用他：

1
2
3
4
5
<!-- article.vue -->
<div>
  <h1>Article Parent</h1>  
  <router-view></router-view>
</div>

在 Nuxt 中這種路由的目錄結構是：

1
2
3
4
pages/
  article.vue
  article/
    author.vue

注意，他同時有 article.vue 還有 article 目錄。
然後在 article.vue 中要這樣設置：

1
2
3
4
5
<!-- article.vue -->
<div>
  <h1>Article Parent</h1>  
  <nuxt-child></nuxt-child> <!-- 改用 nuxt-child 元件 -->
</div>

<nuxt-child> 是一個全域元件，不需要註冊就可以使用他
這麼一來就完成巢狀路由囉

結論

以上就是 Nuxt 設置路由的方法，不知道大家覺得好不好用？

有聽說過有人覺得這個設計很多管閒事，要客製化的時候會很麻煩。
不過目前這樣，應該是足夠應付一些基本需求。

而如果你想要更進一步的對 router 做設置的話，你可以參考官方文件，他提供客製化 router 的方法。

參考資料

Nuxt - File System Routing