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');

这个示例展示了如何在Vue3项目中使用Vite设置基本的Vue Router。其中，/user/:id 路径是一个动态路由参数的例子，:id 部分表示该部分路径是可变的，可以匹配任何字符串。在实际应用中，你可以根据需要添加更多的动态路由参数。