javascript - vite-plugin-pages 中可以使用静态部分的动态路由吗？

Question

我正在使用 Vite 和 vite-plugin-pages 构建一个 Vue.js 3 应用程序用于路由。 https://github.com/hannoeru/vite-plugin-pages

是否可以有一个带有静态部分的动态路由？

e.g. /@[handle].vue

当我这样做时，它不起作用，而是退回到我的包罗万象的路线[...all].vue

我不想将其放在子文件夹中，因此 /@/[handle].vue 不是一个选项。我想要 @ 符号，后跟动态用户名后面的任何内容。

我设法使用 Vue 路由器在另一个应用程序中执行此操作，但不确定如何通过此插件在基于文件夹的路由中实现相同的功能。

我之前是如何做到这一点的:

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      children: [
        {
          path: '/@:handle',
          name: 'Profile',
          component: () => import('../views/Profile.vue'),
          props: true,
        },
      ],
    },
  ]
})

Answer 1

您可以使用该插件的 onRoutesGenerated hook在将路由传递给 Vue Router 之前对其进行转换。

该解决方案需要使用 @ 前缀命名动态路由参数，因此您的情况下的文件名将为 [@handle].vue:

pages/user/[@handle].vue

以下 Vite 配置重命名以 @ 开头的路由参数，以便将 @ 移动到参数之前的路径中:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Pages({
      onRoutesGenerated(routes) {
        const transformRoute = route => ({
          ...route,
          path: route.path.replace('/:@', '/@:'),
          children: route.children?.map(transformRoute) ?? [],
        })

        return routes.map(transformRoute)
      },
    }),
  ],
})

因此上面示例的路由 path 是这样转换的:

/user/:@handle.vue

...对此:

/user/@:handle.vue
      👆

demo