Vue3动态路由（Vite+Vue3+TS+Mock）

// 在Vue3中使用Vite创建项目时，通常会有一个路由文件来定义和配置路由。
// 以下是一个简单的动态路由配置示例，使用Vue Router 4和Vite开发服务器。

// 安装依赖
// npm install vue-router@4

// router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

// 定义路由
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    // 使用动态导入提升应用启动速度
    component: () => import('@/views/About.vue'),
  },
  // 动态路由示例
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/User.vue'),
  },
];

// 创建路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');