vue.js - 对多条路线使用同一页面

Question

我正在尝试找出如何在带有 i18n 模块的 Nuxt.js 上将同一页面用于多个路由。

基本上我想要这条路线：/product-category/:slug/in/:material使用相同的页面/product-category/:slug

到目前为止，我已经在下面尝试过，将其添加到 nuxt.config.js - 但它不起作用。它只是显示_slug/_material/index.vue文件。

router: {
    extendRoutes (routes, resolve) {
        routes.push({
            path: '/product-category/:slug/in/:material',
            component: resolve(__dirname, 'pages/product-category/_slug/index.vue')
        })
    }
},

也许是因为我有 i18n 模块，也许是因为我做错了什么。

这是我的文件夹结构：

如果我检查我的 router.js 文件，我会看到两次显示的路径：

Answer 1

这是我的解决方法，我只是希望有一个更简单的方法。另外，如果您使用 nuxt i18n，它仍然有效。

nuxt.config.js

router: {
    extendRoutes (routes, resolve) {
        const routesToAdd = [
            { // add your routes here
                name: 'product-category-slug-material',
                path: '/product-category/:slug/in/:material',
                component: resolve(__dirname, 'pages/product-category/_slug/index.vue'), // which component should it resolve to?
                chunkName: 'pages/product-category/_slug/_material/index' // this part is important if you want i18n to work
            }
        ];

        const existingRoutesToRemove = routesToAdd.map(route => route.name);

        const generateRoutes = routes.filter((route) => {
            return !existingRoutesToRemove.includes(route.name);
        });

        routesToAdd.forEach(({ name, path, component, chunkName }) => {
            generateRoutes.push({
                name,
                path,
                component,
                chunkName
            });
        });

        routes.splice(0, routes.length, ...generateRoutes); // set new array
    }
},

Answer 2

你可以_.vue用来捕捉一切。

如果你不知道你的 URL 结构的深度，你可以使用 _.vue 来动态匹配嵌套路径。这将处理与更具体的请求不匹配的请求。

在这里您可以了解更多信息。