Nuxt.js路由

路由

Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置。

要在页面之间使用路由，我们建议使用<nuxt-link>标签。

例如：

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

基础路由

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

你会发现名称为users-id的路由路径带有:id？参数，表示该路由是可选的。原理跟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错误页面。

validate方法

router属性配置

router属性让你可以个性化配置Nuxt.js应用的路由(vue-router)。

base

应用的根URL。举个例子，如果整个单页面应用的所有资源可以通过/app/来访问，那么base配置项的值需要设置为'/app'。
例如(nuxt.config.js)：

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

base被设置后，Nuxt.js会自动将它添加至页面中：<base href="{{router.base}}">