Vue.js 是一个流行的前端框架，它提供了一种简单而强大的方式来构建交互式的用户界面。Vue.js 也提供了一些工具来帮助我们管理应用程序的路由。其中，vue-router 是一个常用的路由管理器，它可以帮助我们在单页应用程序中实现路由功能。
什么是路由
在 Web 开发中，路由通常指的是 URL 的路径部分。例如，在一个在线商店的网站中，我们可能有以下 URL：
- /：首页
- /products：产品列表页
- /products/123：产品详情页，其中 123 是产品的 ID
- /cart：购物车页面
- /checkout：结算页面
路由管理器的作用就是根据 URL 的路径部分来决定显示哪个页面或组件。在 Vue.js 中，我们可以使用 vue-router 来实现路由管理。
安装和配置 vue-router
要使用 vue-router，我们需要先安装它。可以使用 npm 来安装 vue-router：
--- ------- ----------
安装完成后，我们需要在 Vue.js 应用程序中配置 vue-router。在 main.js 文件中添加以下代码：
------ --- ---- -----
------ --------- ---- ------------
------ --- ---- -----------
------------------
----- ------ - --- -----------
------- -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- --
- ----- ----------- ---------- ------- -
-
--
--- -----
--- -------
-------
------- - -- ------
--上面的代码中，我们首先导入了 Vue.js 和 vue-router，然后使用 Vue.use() 方法来安装 vue-router。接着，我们创建了一个 router 实例，并定义了几个路由规则。每个路由规则都包含一个 path 和一个 component，表示当 URL 匹配到该路径时，应该显示哪个组件。最后，我们将 router 实例传递给 Vue.js 实例，并将其挂载到 #app 元素上。
在组件中使用路由
在定义了路由规则之后，我们可以在组件中使用路由。Vue.js 提供了一个名为 $router 的全局对象，我们可以使用它来访问路由。例如，在一个导航栏组件中，我们可以使用以下代码来创建一个链接到 /about 页面的按钮：
----------
-----
------------ -------------------------------
------
-----------上面的代码中，我们使用了 Vue.js 提供的 router-link 组件来创建一个链接。to 属性指定了链接的目标路径，这里是 /about。
我们也可以在 JavaScript 中使用 $router 对象来实现路由跳转。例如，在一个登录组件中，我们可以使用以下代码来实现登录成功后跳转到 /dashboard 页面：
------ ------- -
-------- -
------- -
-- ----
-------------------------------
-
-
-上面的代码中，我们使用了 $router.push() 方法来实现路由跳转。这里传递了目标路径 /dashboard。
路由参数和动态路由
除了基本的路由规则之外，vue-router 还支持路由参数和动态路由。路由参数通常用于传递一些数据到组件中，例如一个产品详情页的路由 /products/123 中的 123 就是一个路由参数。我们可以在路由规则中使用冒号来定义路由参数，例如：
----- ------ - --- -----------
------- -
- ----- ---------------- ---------- ------------- -
-
--上面的代码中，我们定义了一个路由规则，它匹配所有以 /products/ 开头的 URL，并将其中的数字部分作为路由参数 id。在 ProductDetail 组件中，我们可以通过 $route.params.id 来访问该路由参数。
除了路由参数之外，vue-router 还支持动态路由。动态路由是一种特殊的路由规则，它可以根据 URL 中的某些部分来动态匹配路由。例如，我们可以使用以下代码来定义一个动态路由：
----- ------ - --- -----------
------- -
- ----- ------------------- ---------- ----------- -
-
--上面的代码中，我们定义了一个路由规则，它匹配所有以 /users/ 开头的 URL，并将其中的字符串部分作为动态路由参数 username。在 UserProfile 组件中，我们可以通过 $route.params.username 来访问该动态路由参数。
总结
在本文中，我们介绍了 vue-router，它是一个流行的路由管理器，可以帮助我们在 Vue.js 应用程序中实现路由功能。我们学习了如何安装和配置 vue-router，以及如何在组件中使用路由。我们还介绍了路由参数和动态路由，它们可以帮助我们更灵活地管理路由。希望本文对你有所帮助，让你更好地掌握 Vue.js 中的路由管理技术。
示例代码
下面是一个完整的示例代码，包含了路由配置、组件定义和使用路由的示例：
------ --- ---- -----
------ --------- ---- ------------
------ --- ---- -----------
------ ---- ---- -----------------------
------ ----- ---- ------------------------
------ ------- ---- --------------------------
------ ------------- ---- --------------------------------
------ ----------- ---- ------------------------------
------------------
----- ------ - --- -----------
------- -
- ----- ---- ---------- ---- --
- ----- --------- ---------- ----- --
- ----- ----------- ---------- ------- --
- ----- ---------------- ---------- ------------- --
- ----- ------------------- ---------- ----------- -
-
--
--- -----
--- -------
-------
------- - -- ------
------ ------- ---
----------
---- ---------
-----
------------ -------------------------
------------ -------------------------------
------------ -----------------------------------
------
---------------------------
------
-----------
--------
------ ------- -
----- -----
-
------------- -------- ---
----------
-----
-------------
------
--------------- --------- ---
----------
-----
--------------
------
--------------- ----------- ---
----------
-----
----------------
------
--------------- ----------------- ---
----------
-----
----------- -----------
------ -- ---------------- ------
------
--------------- --------------- ---
----------
-----
-------- ------------
------------ -- ---------------------- ------
------
-----------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6577ca83d2f5e1655d17fd2a