一天中的好时光，

我在Nuxt@2.0遇到了一个非常奇怪的问题，如下：

  • 创建模块并动态加载路由

  • 使用侧边栏导航到页面 - 页面工作正常（内容显示等）

  • 复制页面网址并在新标签页中打开 - 404，但是，面包屑生成器中的所有元数据都在那里（它解析路径名称并为面包棒创建条目）

因此，从技术上讲，nuxt能够加载页面，但是，它无法实际加载它（奇怪的措辞，但我不知道如何更好地描述它） .

Plugins used:

  • nuxt @ edge（2.0~）

  • nuxt-i18n - 所有路由都附有 ___locale 字符串，例如： dashboard___en ， dashboard___es ， dashboard___ru 等

为了动态加载路由，使用以下 plugin （在 nuxt.config.js 中的插件下定义）：

import Vue from 'vue';
export default ({ app: { router } }) => {
    const routingContext = require.context('../modules', true, /.routing.js$/);

    routingContext.keys().map((file) => [file.replace(/(^.\/)|(\.js$)/g, ''), routingContext(file)]).reduce((pluginRoutes, [name, module]) => {
        Vue.use(module, router);
    }, {});
};

modules文件夹中的 routing.js 文件如下所示：

import { backendRoute, routeNameGenerator } from '~/libs/helpers';
import config from '~/config';
import forEach from 'lodash.foreach';

import CompanyPage from './pages/company';

export function install (Vue, router, options = {}) {

    let routes = [
        {
            path: backendRoute('namespace/module/company'),
            name: routeNameGenerator('namespace.module.company'),
            component: CompanyPage
        }
    ];

    let localizedRoutes = [];

    forEach(routes, (route) => {
        forEach(config.application.localization.supportedLocales, (locale) => {
            let modifiedRoute = Object.assign({}, route);
            modifiedRoute.name = route.name + '___' + locale;
            localizedRoutes.push(modifiedRoute);
        });
    });

    router.addRoutes(localizedRoutes);

}

并且生成正确路由名称和路由路径的帮助程序如下：

/**
 * Generate Backend Route
 * @param { string } path
 * @returns { string }
 */
export function backendRoute(path) {
    let basePath = application.backend_prefix.rtrim('/');
    let trimmedPath = path.ltrim('/');
    return basePath + '/' + trimmedPath;
}

/**
 * Generate route name compatible with nuxt
 * @param routeName
 * @returns {string}
 */
export function routeNameGenerator(routeName) {
    let parts = routeName.split('.');
    let backend = application.backend_prefix.replaceAll('/', '');
    return [].concat(...[backend], ...parts).join('-');
}

正如我已经说过的，如果您通过实际跟踪路径的路径导航到动态加载的路由，它将显示内容，但是如果您想直接访问此路由，将抛出404但面包屑将仍然会生成路由是一种加载，但同时它不是 .

我已经从 /pages 目录和动态页面中的页面检查了 this.$route 的输出，它是相同的（显然不是路径和名称），所以在这一点上我不知道我的加载路由的方式有什么问题 .

非常感谢任何帮助，谢谢你的时间！

附：我没有使用 @nuxt\router 支持自动路由生成 root\pages 目录中的文件 .

Update #1: 有时，它偶尔会抛出 Cannot read property 'layout' of undefined 错误

javascript vue.js nuxt.js