Nuxt路由配置，自定义路由配置 - 实战教程基础-Day04

一、默认路由

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

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

例如:

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

基础路由

假设 pages 的目录结构如下：

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

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

javascript">router: {
  routes: [
    {
      name: 'index',
      path: '/',
      ***ponent: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      ***ponent: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      ***ponent: 'pages/user/one.vue'
    }
  ]
}

动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

以下目录结构：

pages/
--| _slug/
-----| ***ments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

Nuxt.js 生成对应的路由配置表为：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      ***ponent: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      ***ponent: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      ***ponent: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-***ments',
      path: '/:slug/***ments',
      ***ponent: 'pages/_slug/***ments.vue'
    }
  ]
}

你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.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 错误页面。

嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

假设文件结构如：

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

Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      path: '/users',
      ***ponent: 'pages/users.vue',
      children: [
        {
          path: '',
          ***ponent: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          ***ponent: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

动态嵌套路由

这个应用场景一般比较少见，但是 Nuxt.js 仍然支持：在动态路由下配置动态子路由。

假设文件结构如下：

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      path: '/',
      ***ponent: 'pages/index.vue',
      name: 'index'
    },
    {
      path: '/:category',
      ***ponent: 'pages/_category.vue',
      children: [
        {
          path: '',
          ***ponent: 'pages/_category/index.vue',
          name: 'category'
        },
        {
          path: ':subCategory',
          ***ponent: 'pages/_category/_subCategory.vue',
          children: [
            {
              path: '',
              ***ponent: 'pages/_category/_subCategory/index.vue',
              name: 'category-subCategory'
            },
            {
              path: ':id',
              ***ponent: 'pages/_category/_subCategory/_id.vue',
              name: 'category-subCategory-id'
            }
          ]
        }
      ]
    }
  ]
}

未知嵌套深度的动态嵌套路由

如果您不知道 URL 结构的深度，您可以使用_.vue动态匹配嵌套路径。这将处理与更具体请求不匹配的情况。

文件结构:

pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue

将处理这样的请求：

处理 404 页面，现在符合_.vue页面的逻辑。

二、自定义路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。但是有些情况下需要根据项目的实际情况去定义一个路由,比如 y.js.*** 它也是用Nuxt开发的，访问页面是带了.html的后缀，给人一种错觉感。这种情况该怎么办呢？nuxt 也是给我们提供了方法。

nuxt.config.js配置文件

我们只需要在nuxt.config.js中的router选项中进行配置即可：

//  nuxt.config.js 
export default {
  router: {
   	// 在这里配置路由
  }
  // 其他配置
}

extendRoutes()

在 router 中有一个 extendRoutes 方法允许我们去扩展路由：

//  nuxt.config.js 
export default {
  router: {
    extendRoutes(routes, resolve) {
      // 在这里进行路由扩展
      // routes 是当前的路由配置
      // resolve 是 nuxt 用于获取路由组件所定义的方法
    }
  }
}

routes 是一个数组，该数组是 nuxt 在初始化的时候自己根据 pages 生成的路由配置。如果我们需要扩展路由，只需要向 routes 中 push 一条数据即可，而 resolve 是一个函数，用于获取组件的方法。

在定义路由组件的时候，我们需要通过 resolve('组件绝对地址') 来定义组件，这个是比较特殊的

插入一条数据：

//  nuxt.config.js 
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
		name: 'Test',
		path: '/test.html',
		***ponent: resolve(__dirname, 'pages/test')
	  })
    }
  }
}

启动项目后，在浏览器输入localhost:3000/test.html我们将看到如下效果：

如果你希望清空 nuxt 系统生成的路由配置的时候，nuxt 并没有提供相应的 api。但我们可以根据数组的特性，使用一些方法来实现这个功能

清空数组：

//  nuxt.config.js 
export default {
  router: {
    extendRoutes(routes, resolve) {
      // 清空数组
      routes.splice(0)
      // 插入新的路由配置
      routes.push({
		name: 'Test',
		path: '/test.html',
		***ponent: resolve(__dirname, 'pages/test')
	  })
    }
  }
}

三、总结

      以上就是Nuxt路由配置，跟自定义路由的介绍了，自定义路由只是稍稍带过一下，但是相信有了解过Vue，并难不倒你们，上述的自定义路由配置在nuxt.config.js里面，这样不利于项目维护，当然建议新建一个router.js用户维护路由。如需看Nuxt的自定义路由效果可以仔细了解了解 y.js.***，它这个用Nuxt的自定义路由带了.html后缀访问，给人看起来就好像是html开发的。😂😂😂😂