vue3路由传参数ts写法

WBOY

发布时间：2023-05-25 13:09:39

1526人浏览过

来源于php中文网

原创

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为传递的参数对象，其内部键与路由路径中的参数名相对应。

接收参数

最后，我们需要在被跳转的页面组件中接收参数，并进行类型检查。

LALALAND

AI驱动的时尚服装设计平台

下载

这里有两种方法可以传递参数。一种是通过props，另一种是通过$route。我们分别来看一下这两种传参方法的具体实现：

通过 props 传参

在路由定义时，我们可以通过props选项将路由参数作为组件的属性传递。下面是一个示例代码：

// 路由定义
{
  path: '/page/:id',
  name: 'Page',
  component: Page,
  props: true
}

在组件中，我们可以直接声明这些属性，并通过TypeScript来进行类型检查。下面是一个示例代码：

这里我们使用了Vue3新引入的setup函数，用于替代Vue2中的data、computed、methods等钩子函数。通过props对象，我们可以获取到传递过来的参数，并进行类型检查。

通过 $route 传参

另一种传递参数的方式是通过$route。这种方式下，我们可以通过$route.params对象获取到路由参数。下面是一个示例代码：

需要注意的是，在使用$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;
    /* ... */
  }
});