vue自动路由生成问题

Question

vite-plugin-pages 插件自动生成的vue路由(以views为基准生成)，如果文件结构如下：

为什么生成的 /admin 路由和 /admin/dataStatistics是平级的，也就是说/admin/dataStatistics不是/admin的children路由？

或者按照这种结构让其自动生成路由，也不是嵌套关系

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题分析

你使用了 vite-plugin-pages 插件自动生成 Vue 路由，文件结构如下：

views
admin
index.vue
dataStatistics.vue

但是生成的路由 /admin 和 /admin/dataStatistics 是平级的，这意味着 /admin 不是 /admin/dataStatistics 的父路由。

解决方案

这是因为 vite-plugin-pages 默认会将所有 views 文件夹下的文件都作为顶级路由。要解决这个问题，你可以在 vite-plugin-pages 的配置文件中指定 prefix 选项，例如：

import { defineConfig } from 'vite';
import pages from 'vite-plugin-pages';

export default defineConfig({
  plugins: [
    pages({
      prefix: 'admin/', // 指定前缀
    }),
  ],
});

这样一来，生成的路由 /admin 和 /admin/dataStatistics 就会正确地建立父子关系。

注意

如果你有多个 views 文件夹，需要指定不同的前缀，你可以使用 prefix 选项的数组形式，例如：

import { defineConfig } from 'vite';
import pages from 'vite-plugin-pages';

export default defineConfig({
  plugins: [
    pages({
      prefix: ['admin/', 'user/'], // 指定多个前缀
    }),
  ],
});

这样一来，生成的路由 /admin 和 /admin/dataStatistics 就会正确地建立父子关系。