时间戳

首页 > 解决方案 > 模块中定义的 Nuxt 动态路由

javascript - 模块中定义的 Nuxt 动态路由

问题描述

一天中的好时光，

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

  1. 创建模块并动态加载路由
  2. 使用侧边栏导航到页面 - 页面工作正常（显示内容等）
  3. 复制页面 url 并在新选项卡中打开它 - 404，但是，来自面包屑生成器的所有元数据都在那里（它解析路由名称并为面包屑创建条目）

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

使用的插件：

  1. nuxt@edge (2.0~)
  2. 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);
    }, {});
};

模块文件夹内的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，它是相同的（显然不是路径和名称），所以在这一点上我不知道我加载路由的方式有什么问题。

非常感谢您的任何帮助，并感谢您的宝贵时间！

PS我不@nuxt\router支持目录内文件的自动路由生成root\pages。

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

标签： javascriptvue.jsnuxt.js

解决方案

推荐阅读