Nuxt.js 引入自定义路由_略略大魔王丶_nuxt 自定义路由

未知 02-07 6604

记录下在创建Nuxt项目的时候，引入自定义路由遇到的坑。

首先创建一个路由配置文件

这里我在项目跟目录创建一个叫router的文件，里面的index就是存放路由的配置，如图：

?路由的文件 - 这边只是简单演示

/** * 路由的配置数据 * */ const getRoutes = resolve => [ { path: '/index', name: 'Index', component: resolve('pages/index'), chunkName: 'pages/index', children: [ { path: '/index/test-index', name: 'TestIndex', component: resolve('pages/test-index'), chunkName: 'pages/index/test-index', }, ], }, { path: '*', redirect: '/index', component: resolve('pages/index'), chunkName: 'pages/index', }, ]; // 导出 export default getRoutes;

?接下来在nuxt.config.js中进行配置，将自定义路由引入

// 引入自定义路由 import getRoutes from './router'; export default { // ...其他代码 router: { extendRoutes: (routes, resolve) => { routes = getRoutes(resolve); } }, }

配置好以后运行代码，会发现找不到对应的路由。?

也就是我遇到的坑：

?由于Nuxt.js会自动生成路由，所以必须清空自动生成的路由。直接使用??routes = getRoutes(resolve) 赋值也会导致找不到路由。

?解决办法?

1. 调用方法前先清空自动生成的路由，注意 routes = [] 赋值清空无效。

2. 参考文档，Nuxt.js文档是使用push方法将路由设置进去。

// 引入自定义路由 import getRoutes from './router'; export default { // ...其他代码 router: { extendRoutes: (routes, resolve) => { // 清空Nuxt.js自动生成的路由 routes.splice(0); // 重新将自定义路由配置设置进去 routes.push(...getRoutes(resolve)); } }, }