vue-router ts

如何在 Vue Router 中使用 TypeScript
安装依赖包
为了使 Vue Router 支持 TypeScript，在项目中除了安装 vue-router 外还需要确保已安装了相应的类型定义文件。通常这些会随着主流框架版本自动处理，但如果遇到缺失情况可以手动添加。
npm install vue-router @types/vue-router --save-dev
登录后复制
创建路由配置模块
当利用TypeScript构建应用时，推荐将路由表单独放在一个.ts 文件里以便维护和管理。下面是一个简单的例子来展示怎样设置带有命名视图以及参数传递功能的Vue Router实例[^1]：
// src/router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about/:id?',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
props: true, // 启用props传参给组件
}
]

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})

export default router;
登录后复制
这里需要注意的是通过指定RouteRecordRaw[]类型的数组作为routes变量声明其结构化信息，并且对于动态加载页面采用懒加载的方式优化性能表现。
组件内导航跳转
如果要在组件内部执行编程式的导航操作，则可以通过注入形式获取到当前使用的router对象并调用相应的方法完成路径切换动作[^2]:
this.$router.push({name:'user',params:{uid:'lczmx'}});
登录后复制
上述代码片段展示了如何向目标地址附加额外的数据项（如用户ID），从而实现更加灵活多变的应用场景逻辑控制。