在Vue开发中，vue-router是非常常用的路由管理库。它可以让我们很方便地实现页面之间的跳转和参数传递。本文将详细介绍如何使用vue-router传递参数，并提供示例代码以供参考。
1. 什么是vue-router？
vue-router是Vue.js官方库之一，用于实现单页应用（SPA）的前端路由库。它允许我们在不同的URL之间切换，同时将组件映射到这些URL上。因此，我们可以将一个SPA分解为多个组件，并在这些组件之间进行导航。
2. 如何使用vue-router传递参数？
在vue-router中，我们可以通过$route对象来访问当前路由信息，并且可以在路由中定义动态片段和查询参数，以便在导航时传递参数。
2.1 动态路由匹配
当我们在定义路由时，可以通过使用冒号“:”来捕获URL中的动态片段。例如，在下面的路由配置中，我们定义了一个名为user的路由，并带有一个动态的id片段：
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})在上面的例子中，User组件将被渲染，并且路由中的参数可以通过$route.params.id来访问。
2.2 查询参数
除了动态路由匹配，我们还可以在URL中使用查询参数来传递数据。在vue-router中，查询参数可以通过$route.query访问。例如，在下面的路由配置中，我们定义了一个名为user的路由，并带有一个查询参数name：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- --------
---------- -----
------ ------- -- -- ----- ---------------- --
-
-
--在上面的例子中，我们将name作为User组件的props传递，并通过$route.query.name来获取查询参数。
3. 示例代码
下面是一个完整的Vue.js示例代码，展示如何使用vue-router传递参数：
-- -------------------- ---- -------
-- ------
----- ---- - -
------ ------ --------
--------- -
-----
-------- -- -- -------
-------- -- ---- ------
------
-
-
-- ------
----- ------ - --- -----------
------- -
-
----- ------------
---------- -----
------ ----
--
-
----- ----------
---------- -------
------ ------- -- -- ------ ------------- --
-
-
--
-- -------
----- --- - --- -----
-------
------ -
------ -
------------ --
-
--
-------- -
-------- -
------------------- ----- ---------- ------ - -- ---------------- - --
-
--
--------- -
-----
---- ------- ---
------------ ------ ----- ---------- ------- - ----- ------- - ------- ---------------
------------ ------ ----- ---------- ------- - ----- ----- - ------- ---------------
---- --- ---
------ --------------------- ----------- ---------------------
------- -----------------------------
---- ------ ---
---------------------------
------
-
-----------------在上面的代码中，我们定义了两个路由：/user/:id和/search。其中，`/user/:id
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1158