Question

一天中的好时机

我在使用Nuxt@2.0时遇到了一个非常奇怪的问题：

创建模块并动态加载路线
使用侧边栏导航至页面-页面工作正常（显示内容等）
复制页面网址并在新标签页中打开-404，但是，所有来自面包屑生成器的元数据都存在（它解析路由名称并创建面包屑条目）

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

使用的插件：

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，但是路径会被加载，但仍会生成面包屑，但同时不会。

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

我们非常感谢您的帮助，感谢您的宝贵时间！

P.S。我不使用@nuxt\router来支持为root\pages目录中的文件自动生成路由。

更新＃1： 有时，它有时会引发Cannot read property 'layout' of undefined错误

在模块中定义的Nuxt动态路由

0 个答案: