在 Vue.js 中，vue-router 是常用的路由管理库，可以让我们轻松地构建单页应用。而在实际开发中，我们经常需要传递参数来实现特定的功能，比如从一个页面跳转到另一个页面时需要传递数据。本文将介绍 Vue.js 中使用 vue-router 传参的几种方式。
1. 动态路由传参
动态路由传参是指在路由中定义动态的占位符，并在组件中通过 $route.params 属性来获取参数。
定义动态路由
在定义路由时，可以使用冒号来指定动态的参数：
----- ------ - --- -----------
------- -
-
----- ------------
---------- ----
-
-
--上面的例子中，路由定义了一个参数 id，该参数为动态的，后面的实际值将根据实际情况而定。
获取参数
在组件中，可以通过 $route.params 属性来获取动态路由的参数。例如：
----- ---- - - --------- ---------- -- ---------------- --------- -
上面的例子中，User 组件渲染出的 HTML 内容将包含 id 参数的值。
这种方式非常简单，但只适用于传递少量的参数。当需要传递大量参数时，使用 query、params 对象显得更加合适。
2. 通过 query 传参
query 是一种通过查询参数来传递数据的方式。它会将参数添加到 URL 中，例如 http://example.com?k1=v1&k2=v2。
定义路由
在定义路由时，使用 props 属性将路由的 query 对象映射到组件的 props 属性中。
----- ------ - --- -----------
------- -
-
----- --------
---------- -----
------ ----- -- -- ------ ----------- --
-
-
--获取参数
在组件中，可以通过 props 属性来获取 query 对象的参数。例如：
----- ---- - - ------ ---------- --------- ---------- -- -------- -- -- ---------- --------- -
上面的例子中，User 组件可以通过 this.query 来获得当前路由的 query 对象。
3. 通过 params 对象传参
params 是一种将参数作为组件属性传递的方式。它将参数作为对象添加到路由中，并将该对象映射到组件的 props 属性中。
定义路由
在定义路由时，使用 props 属性将路由的 params 对象映射到组件的 props 属性中。
----- ------ - --- -----------
------- -
-
----- ------------------
---------- -----
------ ----
--
--上面的例子中，路由通过冒号指定了参数 userName，该参数将作为 params 对象添加到路由中，并通过 props 属性将该对象映射到 User 组件的 props 属性中。
获取参数
在组件中，可以通过 props 属性来获取 params 对象的参数。例如：
----- ---- - - ------ ------------- --------- ---------- -- -------- --------- -
上面的例子中，User 组件可以通过 this.userName 来获得当前路由的 params 对象。
4. 在路由的 meta 属性中传递参数
meta 属性是路由对象中的扩展属性，可以使用 meta 传递自定义数据。它通常被用来存储一些对于路由激活过程中需求的元信息。
定义路由
在定义路由时，使用 meta 属性来指定需要传递的数据：
----- ------ - --- -----------
------- -
-
----- --------
---------- -----
----- - ------ ------ -
-
-
--上面的例子中，定义了一个名为 title 的 meta 属性，并将其设置为“用户首页”。
获取参数
在组件中，可以通过 $route.meta 属性来获取 meta 对象的数据。例如：
----- ---- - - --------- -------- ----------------- --------- -
上面的例子中，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