Vue.js 使用 vue-router 传参方式总结

在 Vue.js 中，vue-router 是常用的路由管理库，可以让我们轻松地构建单页应用。而在实际开发中，我们经常需要传递参数来实现特定的功能，比如从一个页面跳转到另一个页面时需要传递数据。本文将介绍 Vue.js 中使用 vue-router 传参的几种方式。

1. 动态路由传参

动态路由传参是指在路由中定义动态的占位符，并在组件中通过 $route.params 属性来获取参数。

定义动态路由

在定义路由时，可以使用冒号来指定动态的参数：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

上面的例子中，路由定义了一个参数 id，该参数为动态的，后面的实际值将根据实际情况而定。

获取参数

在组件中，可以通过 $route.params 属性来获取动态路由的参数。例如：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

上面的例子中，User 组件渲染出的 HTML 内容将包含 id 参数的值。

这种方式非常简单，但只适用于传递少量的参数。当需要传递大量参数时，使用 query、params 对象显得更加合适。

2. 通过 query 传参

query 是一种通过查询参数来传递数据的方式。它会将参数添加到 URL 中，例如 http://example.com?k1=v1&k2=v2。

定义路由

在定义路由时，使用 props 属性将路由的 query 对象映射到组件的 props 属性中。

-- -------------------- ---- -------
----- ------ - --- -----------
  ------- -
    -
      ----- --------
      ---------- -----
      ------ ----- -- -- ------ ----------- --
    -
  -
--

获取参数

在组件中，可以通过 props 属性来获取 query 对象的参数。例如：

const User = {
  props: ['query'],
  template: '<div>User {{ query.id }} {{ query.name }}</div>'
}

上面的例子中，User 组件可以通过 this.query 来获得当前路由的 query 对象。

3. 通过 params 对象传参

params 是一种将参数作为组件属性传递的方式。它将参数作为对象添加到路由中，并将该对象映射到组件的 props 属性中。

定义路由

在定义路由时，使用 props 属性将路由的 params 对象映射到组件的 props 属性中。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userName',
      component: User,
      props: true
    }]
})

上面的例子中，路由通过冒号指定了参数 userName，该参数将作为 params 对象添加到路由中，并通过 props 属性将该对象映射到 User 组件的 props 属性中。

获取参数

在组件中，可以通过 props 属性来获取 params 对象的参数。例如：

const User = {
  props: ['userName'],
  template: '<div>User {{ userName }}</div>'
}

上面的例子中，User 组件可以通过 this.userName 来获得当前路由的 params 对象。

4. 在路由的 meta 属性中传递参数

meta 属性是路由对象中的扩展属性，可以使用 meta 传递自定义数据。它通常被用来存储一些对于路由激活过程中需求的元信息。

定义路由

在定义路由时，使用 meta 属性来指定需要传递的数据：

-- -------------------- ---- -------
----- ------ - --- -----------
  ------- -
    -
      ----- --------
      ---------- -----
      ----- - ------ ------ -
    -
  -
--

上面的例子中，定义了一个名为 title 的 meta 属性，并将其设置为“用户首页”。

获取参数

在组件中，可以通过 $route.meta 属性来获取 meta 对象的数据。例如：

const User = {
  template: '<div>{{ $route.meta.title }}</div>'
}

上面的例子中，User 组件可以通过 $route.meta.title 来获得当前路由的 meta 对象。

总结

本文介绍了 Vue.js 使用 vue-router 传递参数的四种方式：动态路由传参、query 参数传递、params 对象传递和 meta 属性传递。对于不同的场景，选择不同的传参方式可以提高代码的可读性和可维护性。我们可以根据需要选择最适合当前场景的方式来进行参数传递。

示例代码：https://github.com/vuejs/vue-router/tree/dev/examples

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491550248841e9894f563af