搞定！Vue路由组件传参搞定！史上最详细版本！

2023-12-22 11:07:37

Vue.js 路由组件传参指南：使用 params 轻松实现

在构建复杂的 Vue.js 应用程序时，组件传参至关重要。它使我们能够在组件之间共享数据，从而实现更强大的应用程序。params 是 Vue.js 路由中一种常用的传参方式，它提供了在不同组件之间传递查询参数的简单方法。

params 简介

params 是 Vue.js 路由中包含当前路由查询参数的对象。可以通过 this.$route.params 访问它。例如，如果路由路径为 /user/123，则 this.$route.params.id 的值为 123。

如何使用 params 进行组件传参

使用 params 进行组件传参十分便捷，只需在路由配置中指定参数名称即可。例如，可以将 /user/:id 配置为一个路由，其中 :id 是一个参数名称。当访问 /user/123 路由时，this.$route.params.id 的值为 123。

然后，可以在组件中通过 this.$route.params 访问参数值。例如，可以定义一个 User 组件，并使用 this.$route.params.id 获取用户 ID。

<template>
  <div>
    <h1>用户 ID：{{ this.$route.params.id }}</h1>
  </div>
</template>

params 传参示例

以下是一个完整的 params 传参示例：

// 路由配置
const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

// 创建 Vue 实例
const app = new Vue({
  router: new VueRouter({
    routes
  })
});

// 组件定义
const User = {
  template: `
    <div>
      <h1>用户 ID：{{ this.$route.params.id }}</h1>
    </div>
  `
};