Vue3 自动生成路由：在指定文件夹创建 Vue 文件后自动添加路由

在 Vue3 中，可以使用 Vue Router 来实现路由功能。要在指定文件夹建完 Vue 文件后自动生成路由，可以通过以下步骤实现：\n\n1. 首先，确保你已经安装了 Vue Router。如果没有安装，可以使用以下命令进行安装：\n\nnpm install vue-router@next\n\n\n2. 在项目的根目录下创建一个 router.js 文件，用于配置路由。在该文件中，需要导入 vue-router 并创建一个新的 Router 实例，然后配置路由规则。\n\njavascript\n// router.js\n\nimport { createRouter, createWebHistory } from 'vue-router';\n\nconst routes = [\n // 路由规则\n];\n\nconst router = createRouter({\n history: createWebHistory(),\n routes,\n});\n\nexport default router;\n\n\n3. 在项目的入口文件（一般是 main.js）中导入 router.js 文件，并将路由实例挂载到应用程序上。\n\njavascript\n// main.js\n\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport router from './router';\n\nconst app = createApp(App);\n\napp.use(router);\napp.mount('#app');\n\n\n4. 在指定文件夹建完 Vue 文件后，可以使用以下代码来自动生成路由。假设你的 Vue 文件已经创建在 views 文件夹下。\n\njavascript\n// router.js\n\nimport { createRouter, createWebHistory } from 'vue-router';\n\n// 导入所有生成的 Vue 文件\nconst views = import.meta.glob('./views/*.vue');\n\nconst routes = [];\n\n// 遍历所有生成的 Vue 文件，并根据文件名设置对应的路由规则\nObject.keys(views).forEach((path) => {\n const name = path.match(/\.\/views\/(.*?)\.vue$/)[1];\n const component = views[path];\n routes.push({\n path: `/${name}`,\n component: component.default,\n name,\n });\n});\n\nconst router = createRouter({\n history: createWebHistory(),\n routes,\n});\n\nexport default router;\n\n\n以上代码中，使用 import.meta.glob 方法来导入 views 文件夹下的所有 Vue 文件，并遍历这些文件来设置路由规则。根据文件名，可以将路径和组件名设置为路由的 path 和 name。\n\n注意，上述代码中的 import.meta.glob 方法是 Vue 3 中的新特性，需要确保你的开发环境支持该特性。\n\n这样，当你在指定文件夹建完 Vue 文件后，路由就会自动生成了。你可以根据自己的需求来调整生成路由的逻辑。