vue3是目前流行的前端框架之一，有着优秀的组件化和响应式特性。而vue-router则是vue官方提供的路由插件，使得我们可以在前端应用中实现页面之间的跳转，实现单页面应用(spa)。
在开发中，我们有时需要在路由之间传递参数，比如从一个页面跳转到另一个页面并显示对应的数据。接下来，我们将介绍如何在Vue3中通过vue-router传递参数，并结合TypeScript的类型检查，避免因错误传参导致的运行时异常。
安装vue-router
在使用vue-router实现路由跳转前，我们需要先安装vue-router：
npm install vue-router@next
定义路由
接下来，我们需要在Vue应用中定义路由。在Vue3中，路由的定义方式与Vue2有所不同。下面是一个简单的示例代码：
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
props: true
},
{
path: '/page/:id',
name: 'Page',
component: Page,
props: true
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;其中，createRouter和createWebHistory是由Vue3提供的工厂方法，用于创建路由实例和历史记录管理器。
立即学习“前端免费学习笔记（深入）”；
在定义路由时，我们需要指定路径、路由名称和组件。此外，我们还可以通过设置props: true，将路径参数作为组件属性传递，方便组件接收参数。
路由跳转
下面是一个基本的路由跳转示例代码：
import router from '@/router';
router.push({ name: 'Page', params: { id: '1' } });在上述代码中，我们使用router.push方法进行路由跳转。其中，name为跳转的路由名称，params为传递的参数对象，其内部键与路由路径中的参数名相对应。
接收参数
最后，我们需要在被跳转的页面组件中接收参数，并进行类型检查。
这里有两种方法可以传递参数。一种是通过props，另一种是通过$route。我们分别来看一下这两种传参方法的具体实现：
通过 props 传参
在路由定义时，我们可以通过props选项将路由参数作为组件的属性传递。下面是一个示例代码：
// 路由定义
{
path: '/page/:id',
name: 'Page',
component: Page,
props: true
}在组件中，我们可以直接声明这些属性，并通过TypeScript来进行类型检查。下面是一个示例代码：
<script lang="ts">
interface Props {
id: string;
}
export default {
props: {
id: {
type: String,
required: true
}
},
setup(props: Props) {
/* ... */
}
};
</script>这里我们使用了Vue3新引入的setup函数，用于替代Vue2中的data、computed、methods等钩子函数。通过props对象，我们可以获取到传递过来的参数，并进行类型检查。
通过 $route 传参
另一种传递参数的方式是通过$route。这种方式下，我们可以通过$route.params对象获取到路由参数。下面是一个示例代码：
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const id = $route.params.id;
/* ... */
}
});
</script>需要注意的是，在使用$route时，我们需要通过静态类型导入RouteLocationNormalized和RouteParams等路由相关类型，并对参数进行类型检查。
import { defineComponent } from 'vue';
import { RouteLocationNormalized, RouteParams } from 'vue-router';
export default defineComponent({
setup() {
const route = $route as RouteLocationNormalized & { params: RouteParams };
const id = route.params.id;
/* ... */
}
});总结
在Vue3下使用vue-router传递路由参数并进行类型检查，是一种更加安全可靠的方式。通过TypeScript的类型检查，我们可以避免因错误传参导致的运行时异常，提高代码的稳定性。同时，Vue3引入的setup函数、工厂方法等新特性，也让我们在开发过程中更加方便地管理和处理路由。
