Nuxt.js 引入自定义路由

记录下在创建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));
        }
    },
}