Vue 路由参数传递：如何在不同页面之间传递数据

最新推荐文章于 2025-09-03 16:27:49 发布

原创最新推荐文章于 2025-09-03 16:27:49 发布 · 2.8k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #开发语言 #程序人生 #个人开发 #ecmascript

vue 专栏收录该内容

176 篇文章

订阅专栏

Vue 路由参数传递：如何在不同页面之间传递数据

在 Vue 应用中，路由参数传递是实现页面间数据交互的重要手段。Vue Router 提供了多种方法来传递和接收数据，使得在不同页面之间能够方便地共享和传递信息。本文将详细介绍 Vue 路由参数的传递方法，并通过实际示例帮助大家理解如何在不同页面之间传递数据。

Vue Router 参数传递概述
通过路径参数传递数据
- 动态路由与路径参数
- 在组件中获取路径参数
通过查询参数传递数据
- 使用 URL 查询字符串传递数据
- 在组件中获取查询参数
通过路由状态传递数据
- 路由跳转时传递状态
- 在组件中获取状态
参数传递的最佳实践
总结与进阶建议

1. Vue Router 参数传递概述

在 Vue 应用中，路由参数传递是指通过 Vue Router 的机制将数据从一个页面传递到另一个页面。这些数据可以通过路径参数、查询参数或路由状态等方式传递。

路径参数：数据作为 URL 路径的一部分进行传递。
查询参数：数据通过 URL 的查询字符串（例如 ?id=1&name=Vue）传递。
路由状态：通过 state 对象传递数据，不通过 URL，适用于不希望公开数据的情况。

2. 通过路径参数传递数据

2.1 动态路由与路径参数

路径参数是通过 URL 的路径部分传递数据的常用方式。在 Vue Router 中，我们可以使用动态路由来定义路径参数。

示例：动态路由传递参数

// router/index.js
const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User,
  },
];

在上述配置中，:id 是动态路由参数，它将匹配 URL 中的任何值。比如，/user/1 或 /user/123 都会匹配到这个路由，并将 id 参数传递给组件。

2.2 在组件中获取路径参数

在目标组件中，我们可以通过 this.$route.params 获取路径参数。

示例：在组件中使用路径参数

// User.vue
<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: this.$route.params.id,  // 获取路径中的 id 参数
    };
  },
};
</script>

在这个示例中，this.$route.params.id 获取了 URL 中的 id 参数，并将其绑定到 userId 变量上，展示在页面中。

3. 通过查询参数传递数据

查询参数是另一种常见的传递数据的方式，它通过 URL 的查询字符串传递数据，格式为 ?key=value。

3.1 使用 URL 查询字符串传递数据

查询参数常用于在页面之间传递可选的数据。Vue Router 提供了通过 query 对象传递查询参数的方法。

示例：使用查询参数传递数据

// 路由跳转时使用 query 传递参数
this.$router.push({ path: '/user', query: { id: 1, name: 'Vue' } });

3.2 在组件中获取查询参数

在目标组件中，我们可以通过 this.$route.query 获取查询参数。

示例：在组件中使用查询参数

// User.vue
<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
    <h2>User Name: {{ userName }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: this.$route.query.id,  // 获取查询参数 id
      userName: this.$route.query.name,  // 获取查询参数 name
    };
  },
};
</script>

在这个示例中，this.$route.query.id 和 this.$route.query.name 用来获取传递的查询参数 id 和 name。

4. 通过路由状态传递数据

除了路径和查询参数外，Vue Router 还支持在路由跳转时通过 state 对象传递数据。这种方式的数据不会出现在 URL 中，更加隐蔽。

4.1 路由跳转时传递状态

可以在路由跳转时通过 state 参数传递数据。

示例：通过路由状态传递数据

// 路由跳转时使用 state 传递数据
this.$router.push({ path: '/user', state: { id: 1, name: 'Vue' } });

4.2 在组件中获取路由状态

在目标组件中，可以通过 this.$route.state 获取传递的状态。

示例：在组件中使用路由状态

// User.vue
<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
    <h2>User Name: {{ userName }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: this.$route.state.id,  // 获取路由状态中的 id
      userName: this.$route.state.name,  // 获取路由状态中的 name
    };
  },
};
</script>