vue3 自动生成路由

在 Vue 3 中，你可以使用 Vue Router 4 来自动生成路由。下面是一种常见的方法：

首先，确保你已经安装了 `vue-router`：

npm install vue-router@next

然后，在你的 `main.js` 文件中，导入相关的模块和组件：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

// 导入需要自动生成路由的组件
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const Contact = () => import('./views/Contact.vue')

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

// 创建应用实例并挂载路由
createApp(App).use(router).mount('#app')

在上面的示例中，我们导入了需要自动生成路由的组件，并在路由配置中使用了它们。

这样，你就完成了自动生成路由的配置。当你访问相应的路径时，Vue Router 将自动加载对应的组件并显示在应用中。

请注意，这只是一个简单的示例。在实际开发中，你可能需要更复杂的路由配置，例如嵌套路由、路由懒加载和路由守卫等。你可以根据自己的需求进行进一步的配置和扩展。