vue3 + ts 路由配置

### Vue3 和 TypeScript 的路由配置 在 Vue3 项目中使用 TypeScript 配置路由时，可以借助 `vue-router` 提供的功能来实现更强大的类型支持和功能扩展。以下是详细的说明以及示例代码。 #### 安装依赖 为了在 Vue3 项目中使用 TypeScript 进行路由配置，首先需要安装必要的依赖项： ```bash npm install vue-router@next --save ``` 此命令会安装适用于 Vue3 的最新版 `vue-router`[^1]。 --- #### 路由配置文件结构 创建一个名为 `router.ts` 的文件用于管理路由逻辑。该文件通常位于项目的 `src/router/` 目录下。 以下是一个完整的基于 TypeScript 的路由配置示例： ```typescript // src/router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; import Home from '../views/Home.vue'; // 假设有一个首页组件 import About from '../views/About.vue'; // 假设有另一个关于页面组件 const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, } ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router; ``` 上述代码定义了一个简单的路由表，并通过 `createRouter` 方法初始化路由器实例。 --- #### 主应用入口引入路由 确保在主应用入口文件（通常是 `main.ts`）中导入并挂载路由模块： ```typescript // 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'); ``` 这一步将路由集成到整个应用程序上下文中。 --- #### 使用动态参数的高级场景 如果希望处理带有动态路径参数的路由，则可以通过 TypeScript 类型推断增强体验。例如： ```typescript { path: '/user/:id', // 动态部分 :id 表示用户 ID name: 'UserDetail', props: true, // 启用自动传递 route.params 到组件属性 component: () => import('../views/UserDetail.vue'), } ``` 此时，在目标组件内部可以直接访问 `this.$route.params.id` 并获得强类型的提示和支持。 --- #### 添加导航守卫 还可以利用 TypeScript 实现更加安全可靠的导航控制机制。比如全局前置守卫如下所示： ```typescript router.beforeEach((to, from, next) => { console.log('Navigating to:', to.name); // 打印即将跳转的目标名称 if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 如果未登录则重定向至登录页 } else { next(); // 继续正常加载下一个匹配器 } }); ``` 这里假设存在某些受保护资源仅允许已验证身份的用户访问。 --- ### 总结 以上展示了如何在一个基于 Vue3 和 TypeScript 构建的应用程序里完成基础及进阶级别的路由设置过程。它涵盖了从基本静态链接映射直到复杂条件判断下的权限校验等多个方面内容。