路由

Nuxt.js依據(jù)pages目錄結(jié)構(gòu)自動生成vue-router模塊的路由配置。

要在頁面之間使用路由，我們建議使用<nuxt-link>標簽。

例如：

<nuxt-link to="/">首頁</nuxt-link>

基礎(chǔ)路由

假設(shè)pages的目錄結(jié)構(gòu)如下：

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

那么，Nuxt.js自動生成的路由配置如下：

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

動態(tài)路由

在Nuxt.js里面定義帶參數(shù)的動態(tài)路由，需要創(chuàng)建對應(yīng)的以下劃線作為前綴的Vue文件或目錄。
以下目錄結(jié)構(gòu)：

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

Nuxt.js生成對應(yīng)的路由配置表為：

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

你會發(fā)現(xiàn)名稱為users-id的路由路徑帶有:id？參數(shù)，表示該路由是可選的。原理跟vue動態(tài)路由是一致的。

路由參數(shù)校驗

Nuxt.js可以讓你在動態(tài)路由組件中定義參數(shù)校驗方法。
舉個例子：pages/users/_id.vue

export default {
  validate ({ params }) {
    // 必須是number類型
    return /^\d+$/.test(params.id)
  }
}

如果校驗方法返回的值不為true或promise中resolve解析為false或拋出Error，Nuxt.js將自動加載顯示404錯誤頁面或500錯誤頁面。

validate方法

router屬性配置

router屬性讓你可以個性化配置Nuxt.js應(yīng)用的路由(vue-router)。

base

應(yīng)用的根URL。舉個例子，如果整個單頁面應(yīng)用的所有資源可以通過/app/來訪問，那么base配置項的值需要設(shè)置為'/app'。
例如(nuxt.config.js)：

module.exports = {
    router: {
        base: '/app/'
    }
}

base被設(shè)置后，Nuxt.js會自動將它添加至頁面中：<base href="{{router.base}}">