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

Question

我正在构建一个 Vue.js 3 应用程序，其中包含用于路由的 Vite 和 vite-plugin-pages。 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

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

Dynamic route with static part possible in vite-plugin-pages?

javascript

vue.js

routes

vite