vue3+vite+ts 动态路由

Vue3、Vite 和 TypeScript 的组合通常用于构建高性能、现代前端应用。动态路由在这样的框架中主要用于处理URL路径变化时，能够动态加载不同的组件。以下是基本步骤：

1. **安装依赖**：首先确保已安装 Vue CLI 4 或更高版本，并安装 `@vue/cli-plugin-vite` 和 `typescript` 插件。运行命令：

   vue create your-project-name --type @vitejs/app --preset typescript

2. **配置 Vite**：在 `vite.config.ts` 中启用路由功能并设置动态路由规则。例如：

   import { defineRoute } from 'vite';
   
   export default defineRoute({
     routes: [
       // 动态路由示例
       {
         path: '/users/:userId', // URL 匹配模式
         component: () => import('./views/User.vue'), // 指向需要渲染的组件
       },
     ],
   });

3. **使用 TypeScript**：在路由组件中，TypeScript 支持类型安全的路由参数。例如，在 `User.vue` 文件中，可以声明 `userId` 参数：

   import { h, defineComponent } from 'vue';

   interface Props {
     userId: string;
   }

   export default defineComponent<Props>({
     // 组件内容...
   });

4. **访问动态路由**：在组件内部通过 props 接收动态参数，如 `this.$route.params.userId`。