在开发中，我们有时需要在路由之间传递参数，比如从一个页面跳转到另一个页面并显示对应的数据。接下来，我们将介绍如何在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函数、工厂方法等新特性，也让我们在开发过程中更加方便地管理和处理路由。
以上就是vue3路由传参数ts写法的详细内容。