nuxt 使用进阶-自定义路由配置

自定义路由配置

nuxt 本身会根据 pages 目录下的文件结构生成站点路由，这种方式非常的方便，不需要我们自己去配置路由。但是有些情况下需要根据项目的实际情况去定义一个路由，这种情况该怎么办呢？nuxt 也是给我们提供了方法。

nuxt.config.js配置文件

nuxt 允许我们在 nuxt.config.js 文件中对 项目进行进一步的配置，如路由配置。
首先我们需要在 项目根路径下创建文件 nuxt.config.js ，然后使用默认导出一个对象，这个对象就是用于自定义 nuxt 的配置，而路由的配置可以在对象中的 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 是一个函数，用于获取组件的方法。

插入一条路由

//  nuxt.config.js 
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
		name: 'Home',
		path: '/home',
		component: resolve(__dirname, 'pages/home')
	  })
    }
  }
}

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

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

清空数组

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

如果想了解更多，可以去看他的官方文档介绍 《nuxt router配置》