在這邊將介紹不同型態的Routing

常用的有這幾種：Basic、Dynamic、Nested

因為Nuxt封裝了路由的生成，所以你不需要額外編寫路由(vue-router)，只需要管理好
pages文件夾下的結構，將會自動生成對應的路由。

從核心原始碼中可以看到，路由的生成主要是在lib/build.js裡面處理的，大致步驟如下：

1. 通過glob獲取pages下所有文件，得到數組
2. 過濾掉pages和.vue等不相關的字符串
3. 對帶有_符號進行處理
4. 處理動態路由和嵌套路由
5. 對子路由排序

接下來我們來詳細介紹一下，各種路由該如何使用吧

基本靜態路由配置

可以直接於pages資料夾下建置新的頁面或是資料夾即可
結構圖:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

將會自動生成此路由配置:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

這邊很單純就如同檔案上的意思，他會透過你網址所輸入的path找到相對應的component，其中name則為它的命名，可使用以下方式進行編寫:

//編程式
this.$router.push({ name:'user-one' })

//聲明式
<nuxt-link :to="{ name:'user-one' }"></nuxt-link>

這邊所編譯出來的name會以-來做分隔，若要更換可以在config檔中設定router.routeNameSplitter

動態路由配置

在 Nuxt.js 裡面定義帶參數的動態路由，需要創建對應的以下劃線作為前綴的 Vue 文件 或 目錄。

• 基本的動態配置

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

編譯出來後的vue-router為:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

這邊大致上與靜態的結構相同，若對vue-router較為不熟的朋友，可能會較不理解:id跟:slug的意思，簡單來說就是可以透過網址傳遞的params，如下:

####動態崁入配置

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

編譯出來後的vue-router為 :

router: {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
      name: 'index'
    },
    {
      path: '/:category',
      component: 'pages/_category.vue',
      children: [
        {
          path: '',
          component: 'pages/_category/index.vue',
          name: 'category'
        },
        {
          path: ':subCategory',
          component: 'pages/_category/_subCategory.vue',
          children: [
            {
              path: '',
              component: 'pages/_category/_subCategory/index.vue',
              name: 'category-subCategory'
            },
            {
              path: ':id',
              component: 'pages/_category/_subCategory/_id.vue',
              name: 'category-subCategory-id'
            }
          ]
        }
      ]
    }
  ]
}

這邊要特別說明一下children這邊render出來的畫面，會是先將父階的component呈現出來後，再由父階中的所編寫的<nuxt-child/>位置render出children中所對應的component。

總結

Nuxt將原本需要編寫在vue-router中的規則，以pages這個資料夾中的資料結構自動產生，其中以_表示原vue-router中的:動態參數，且若有崁入關西的路由，則以資料夾與同層且同名的的形式表示，如上方的pages裡的**_category資料夾**下的檔案 與 _category.vue 的結構關係。