iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
1

前一章我們新增 /pages/product.vue
編輯即可在 http://localhost:3000/product 預覽頁面。

pages/
--| product.vue
--| index.vue

Nuxt.js 按 /pages/**/*.vue 的檔案結構,幫開發者自動產生路由

相較於其他 Vue.js SSR 方案,Nuxt 貼心地省了工

像是上一章的編譯結果

/* /.nuxt/router.js */
export function createRouter () {
  return new Router({
    mode: 'history',
    base: '/',
    linkActiveClass: 'nuxt-link-active',
    linkExactActiveClass: 'nuxt-link-exact-active',
    scrollBehavior,
    routes: [
		{
			path: "/product",
			component: _9c5e885e,
			name: "product"
		},
		{
			path: "/",
			component: _476bd8b4,
			name: "index"
		}
    ],
    
    
    fallback: false
  })
}

不再需要像寫 Vue.js SPA 時,需要自己一一定義 Routing

你也可以比較其他自幹做法,論其好壞


對應規則

網站結構會隨著功能、頁面增加變得複雜、變深,有時候得自帶參數

帶參數的動態路由

_ 前綴代表動態路由(帶params的路徑)

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

生成以下路徑

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'
    }
  ]
}

自定義 Routing

你會想,有些重複頁面,我不就得按照對應規則,存成不同檔名。

Nuxt 有兩種擴充 Routing 定義的作法

  1. 全域設定檔內定義 Routing 規則
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'custom',
        path: '/custom',
        component: resolve(__dirname, 'pages/product.vue')
      })
    }
  }
  1. 透過Nuxt Router Module 模組擴充
    用法與差異先賣個關子,Nuxt 進階設定 推薦模組中會提到。

上一篇
05. Nuxt 產生簡單頁面
下一篇
07. Nuxt 頁面怎麼切會更好?以電商登入頁為例
系列文
Nuxt - 使用 Vue.js 做 SSR 的第一哩路32

尚未有邦友留言

立即登入留言