如何在Nuxt3中添加自定义路径路由？

Question

这是我的应用程序页面

https://example.com/
https://example.com/products/
https://example.com/products/1
https://example.com/blogs/
https://example.com/blogs/1
...

目录如下

pages
> products
  > index.vue
  > [id].vue
> blogs
  > index.vue
  > [id].vue
...

现在我得到了创建如下页面的任务

https://example.com/g/          => (exactry same as https://example.com/)
https://example.com/g/products/ => (exactry same as https://example.com/products/)
https://example.com/g/products/1/ => (exactry same as https://example.com/products/1/)
...

复制'g'目录下的所有页面很困难，我不想复制代码。

有什么解决办法吗？

（我无法重定向到原始页面。无法更改网址。）

Answer 1

这就是您可以在 Nuxt 3 中扩展 vue-router 路由的方法（请参阅 nuxt github 存储库上的这条消息，问题 #12823）。

它使用称为

pages:extend

的构建时间钩子（参见build hooks列表）。
它唯一的参数是已经注册的路线（来自

/pages

文件夹）。所以你可以用它来复制路由配置。

import { resolve } from 'path'
import { createCommonJS } from 'mlly'
const { __dirname } = createCommonJS(import.meta.url)

export default defineNuxtConfig({
  hooks: {
    'pages:extend'(pages) {
      // Add fixed page
      pages.push({
        name: 'testAbout',
        path: '/test/about',
        file: resolve(__dirname, 'pages/about.vue'),
      });

      // Get all pages you want to duplicate with a `/g` prefix route path
      const pagesToDuplicate = pages.filter(page => page.path === '/' || page.path.startsWith('/products' || page.path.startsWith('/blog')));
      pagesToDuplicate.forEach(page => {
        pages.push({
          ...page,
          path: `/g${page.path}`,
          name: `g-${page.name}`,
        });
      });
    },
  },
})

Answer 2

我会为此使用中间件：

创建

/middleware/redirect.global.ts

：

export default defineNuxtRouteMiddleware((to) => {
  if (to.path.startsWith('/g/')) {
    return navigateTo(to.path.replace('/g',''))
  }
})

这将在每次路由之前运行，检查目标路径，如果它在路径中看到新的子目录，它将提取它并重新路由到原始页面结构。

注意： 确保更改的路线是绝对的 - 它必须以

/

开头，否则您将陷入无限导航循环。