vue3路由传参数ts写法

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函数、工厂方法等新特性，也让我们在开发过程中更加方便地管理和处理路由。