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
    }
},