在 Vue.js 单页应用开发中，路由是非常重要的一环。除了实现页面跳转和 URL 的管理外，路由还承担了组件间传值的任务。本文将介绍 Vue.js 应用如何实现路由间传参，让您的应用更加智能和灵活。
一、路由传参方式
Vue.js 为我们提供了三种路由传参方式：query、params 和 meta。下面分别介绍这三种方式的特点和使用方法。
1. query
query 是一种比较常用的传参方式，它将参数放在 URL 的查询字符串中，例如：
http://localhost:8080/user?id=123&name=Tom
这里的 id 和 name 就是通过 query 传递进来的参数。在 Vue.js 中，我们可以通过 $router 对象的 push 或 replace 方法传递 query 参数。例如，我们可以这样定义路由：
{
path: '/user',
component: User,
}然后在组件中通过 $route 对象访问 query 参数：
// User.vue
export default {
mounted() {
console.log(this.$route.query.id);
console.log(this.$route.query.name);
}
}在这个例子中，我们将 id 和 name 参数传递给 User 组件，User 组件可以在 mounted 钩子函数中访问这些参数。
2. params
params 是一种比较常用的传参方式，它将参数放在 URL 的路径中，例如：
http://localhost:8080/user/123/Tom
这里的 123 和 Tom 就是通过 params 传递进来的参数。在 Vue.js 中，我们可以通过 $router 对象的 push 或 replace 方法传递 params 参数。例如，我们可以这样定义路由：
{
path: '/user/:id/:name',
component: User,
}这里的 :id 和 :name 表示占位符，表示这两个参数是动态的。然后在组件中通过 $route 对象访问 params 参数：
// User.vue
export default {
mounted() {
console.log(this.$route.params.id);
console.log(this.$route.params.name);
}
}在这个例子中，我们将 id 和 name 参数传递给 User 组件，User 组件可以在 mounted 钩子函数中访问这些参数。
3. meta
meta 是一种比较特殊的传参方式，它将参数放在路由元信息（meta）中，例如：
{
path: '/user',
component: User,
meta: {
id: 123,
name: 'Tom'
}
}这里的 id 和 name 就是通过 meta 传递进来的参数。在 Vue.js 中，我们可以通过 $route 对象访问 meta 参数：
// User.vue
export default {
mounted() {
console.log(this.$route.meta.id);
console.log(this.$route.meta.name);
}
}在这个例子中，我们将 id 和 name 参数传递给 User 组件，User 组件可以在 mounted 钩子函数中访问这些参数。
二、路由传参示例
下面是一个完整的使用路由传参的示例，它包括了使用 query、params 和 meta 三种方式传递参数：
-- -------------------- ---- -------
-- ---------------
------ --- ---- -----
------ ------ ---- ------------
------ ---- ---- -------------------
------ ------- ---- ----------------------
---------------
------ ------- --- --------
------- -
-
----- ----
--------- -------
--
-
----- --------
----- -------
---------- -----
----- -
--- ----
----- -----
-
--
-
----- -----------
----- ----------
---------- -------
--
-
----- --------------
----- ------------
---------- ----
--
-
----- ------------------
----- -------------
---------- ----
--
-
--
-- --------
----------
-----
-------------
----
------- -- -- -------
--------- -- ---- -------
-------- --- -- ------ -------
-------- ----- -- -------- -------
-----
------
-----------
--------
------ ------- -
--------- -
---- -
------ --------------------- -- -------------------- -- ---
--
------ -
------ ----------------------- -- ---------------------- -- ---
--
-------- -
------ ------------------- -- ---
--
---------- -
------ --------------------- -- ---
-
-
-
---------
-- -----------
----------
-----
----------------
------- -------------------- -- -------------
------
-----------
--------
------ ------- -
-------- -
---------- -
-------------------
----- -------------
------- -
--- ------
----- ------
-
--
-
-
-
---------在这个示例中，我们定义了两个路由：/user 和 /profile。/user 路由通过 query、params 和 meta 三种方式传递参数，/profile 路由通过按钮跳转到 /user 路由，并传递了 params 参数。
在 User 组件中，我们通过 computed 计算属性访问了这些参数，如果参数不存在就返回空字符串。注意，我们通过 || 运算符判断参数是否存在的技巧，这样可以避免代码冗长。
在 Profile 组件中，我们通过 $router 对象的 push 方法跳转到 /user 路由，并传递了 params 参数。这里的跳转方式是通过路由名称来跳转的，这样可以避免硬编码路由路径，更加灵活。
三、总结
通过本文的介绍，相信您已经了解了 Vue.js 如何实现路由间传参，以及三种传参方式的特点和使用方法。在实际开发中，您可以根据具体业务需求选择合适的传参方式，从而让您的应用更加智能和灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c5d1348841e9894ab6b78