《通信软件前端开发》课件-42.vue3 路由TypeScript 配置与类型提示

《通信软件前端开发》vue3路由TypeScript配置与类型提示基础类型体系import{createRouter,createWebHistory,RouteRecordRaw,//路由记录类型

RouteLocationNormalized,//标准化路由位置

NavigationGuard//导航守卫类型}from'vue-router'//通信设备报警系统import{createRouter,createWebHistory}from'vue-router'importtype{RouteRecordRaw}from'vue-router'核心类型导入

类型推导的优势字段自动补全必填项校验（如component不能遗漏）路径参数的类型约束（动态段:必须对应命名参数）路由元信息的类型扩展constroutes:RouteRecordRaw[]=[{path:'/',redirect:'/devices'},{path:'/devices',name:'Devices',component:()=>import('../views/DeviceList.vue'),meta:{title:'设备列表'}......meta字段的类型问题

//在项目任意类型声明文件中（如src/typings/router.d.ts）import'vue-router'declaremodule'vue-router'{interfaceRouteMeta{title?:string//页面标题

requiresAuth?:boolean//是否需要登录

permissions?:string[]//所需权限列表

transition?:string//过渡动画名称

keepAlive?:boolean//是否缓存

}}

路由参数的类型困境typeRouteParams=Record<string,string|string[]>//类型收窄的常用模式//模式1：类型守卫constid=Array.isArray(params.id)?params.id[0]:params.id//模式2：类型断言constid=params.idasstring//模式3：自定义组合式函数functionuseRouteParams(){constroute=useRoute()returncomputed(()=>({id:Array.isArray(route.params.id)?route.params.id[0]:route.params.id}))}useRoute()的返回值类型

编程式导航的类型问题router.push的参数类型字符串路径：/user/123路径对象：{path:'/user/123'}命名路由：{name:'User',params:{id:'123'}}类型安全缺失的原因RouteLocationRaw的类型定义是宽松的，因为路由表是在运行时动态注册的，TypeScript编译器无法静态分析某个name是否存在，也无法确定该路由需要哪些params。解决方案思路查询参数优先常量维护封装工具函数//示例：枚举路由名称enumRouteNames{Home='Home',User='User'}//封装专用函数functiongoToUser(id:string){router.push({name:RouteNames.User,params:{id}})}

路由守卫的类型支持①boolean：true放行，false中断②RouteLocationRaw：重定向到其他路由③void/undefined：默认放行类型为NavigationReturn？类型守卫应用场景示例：router.beforeEach((to,from)=>{//得益于之前的类型扩展，to.meta.requiresAuth是boolean|undefinedif(to.meta.requiresAuth&&!isLoggedIn()){//返回值类型自动推导为重定向对象

return{name:'Login',query:{redirect:to.fullPath}}}})导航守卫的返回类型

守卫参数的类型（RouteLocationNormalized）课堂总结基础类型RouteRecordRaw是路由表的核心约束类型；01参数类型route.params是string|string[]，需要类型收窄；03元信息扩展通过模块扩充为