Vue3 中使用 TypeScript 进行路由传参的写法

在 Vue3 项目开发中，路由传参是一项常见且重要的功能。结合 TypeScript 使用，可以让代码更加健壮和易于维护。下面我们就来探讨一下 Vue3 中使用 TypeScript 进行路由传参的具体写法。

一、路由参数的类型定义

我们需要对路由参数进行类型定义。在 TypeScript 中，可以通过接口（Interface）或类型别名（Type Alias）来实现。例如，假设我们有一个路由，接收一个 id 参数，可以这样定义：

// 接口定义
interface RouteParams {
  id: string
}

// 类型别名定义
type RouteParams = {
  id: string
}

二、路由配置中的参数设置

在 Vue Router 的配置文件中，设置带有参数的路由。例如：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id',
      name: 'User',
      component: () => import('@/views/User.vue')
    }
  ]
})

export default router

这里定义了一个名为 User 的路由，路径中包含 :id 参数。

三、传递参数

在组件中进行路由跳转并传递参数时，我们可以使用 router.push 方法。结合前面定义的类型：

import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'

const routeParams: RouteParams = { id: '123' }

export default defineComponent({
  setup() {
    const router = useRouter()

    const goToUser = () => {
      router.push({ name: 'User', params: routeParams })
    }

    return {
      goToUser
    }
  }
})

这样就实现了向 User 路由传递参数。

四、接收参数

在目标组件中接收参数。在 User.vue 组件中：

import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  setup() {
    const route = useRoute()
    const id = route.params.id as string

    return {
      id
    }
  }
})

通过 useRoute 函数获取当前路由信息，然后从 params 属性中获取传递过来的 id 参数，并进行类型断言。

通过上述步骤，我们在 Vue3 中使用 TypeScript 完成了路由传参的整个流程。这种写法不仅让代码逻辑更加清晰，而且利用 TypeScript 的类型检查功能，有效减少了潜在的错误，提高了开发效率和代码质量。无论是小型项目还是大型企业级应用，这种方式都值得推荐使用。