nuxt路由的簡單用法及動態路由驗證

一、nuxt推薦用<nuxt-link>進行路由跳轉

例如：

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

 

二、nuxt根據頁面結構自動生成路由

假設 pages 的目錄結構如下：

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

三、動態路由

動態路由：即一些帶有參數的頁面

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

目錄結構：

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

Nuxt.js 生成對應的路由配置表為：

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

四、路由參數效驗

Nuxt.js 可以讓你在動態路由組件中定義參數校驗方法。

舉個例子： pages/users/_id.vue

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

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

詳細：https://zh.nuxtjs.org/api/pages-validate/