Vue 3 + TypeScript: 如何通过 URL 参数在组件间传递数据

Vue 3 + TypeScript: 如何通过 URL 参数在组件间传递数据

在 Vue.js 项目中，URL 参数（包括查询参数和路由参数）是我们经常用来在组件间传递数据的一种方法。特别是在 Vue 3 + TypeScript 项目中，合理使用 URL 参数不仅可以使代码更清晰，还可以通过 TypeScript 提供更好的类型安全和代码提示。在这篇文章中，我将介绍如何在 Vue 3 + TypeScript 项目中接收和使用 URL 参数。

目录

1. 项目配置
2. 查询参数（Query Parameters）
   • 配置路由
   • 传递查询参数
   • 获取查询参数
3. 路由参数（Route Parameters）
   • 配置路由
   • 传递路由参数
   • 获取路由参数
4. 完整项目示例
5. 总结

---

1. 项目配置

在开始之前，让我们配置好基础的 Vue 3 + TypeScript 项目。你可以使用 Vue CLI 或 Vite 创建项目。在这里，我们假设你已经设置了一个基本的 Vue 3 + TypeScript 项目。

src/main.ts

import {
   
    createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

src/App.vue

<template>
  <router-view></router-view>
</template>

<script lang="ts">
export default {
  name: 'App'
};
</script>

src/router/index.ts

import {
   
    createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import HomeComponent from '../components/HomeComponent.vue';
import UserComponent from '../components/UserComponent.vue';

const routes: Array<RouteRecordRaw> = [
  {
   
    path: '/', name: 'HomeComponent', component: HomeComponent },
  {
   
    path: '/user/:id', name: 'UserComponent', component: UserComponent },
];

const router =