iT邦幫忙

1

NUXT.js 筆記 - 路由 (Routing)

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

常用的有這幾種:BasicDynamicNested

因為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,如下:

模式 匹配路径 $route.params component
/:slug/comments /gold/comments { slug: 'gold' } pages/_slug/comments.vue
/users/:id /users/123 { id: 123 } pages/users/_id.vue

####動態崁入配置

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 的結構關係。


尚未有邦友留言

立即登入留言