什么是 Vue-Router
Vue-Router 是 Vue.js 官方路由管理器，它和 Vue.js 深度集成，可以让我们轻松地将 Vue.js 构建的单页面应用（SPA）中的组件分配到不同的 URL，实现页面之间的调度控制。
Vue-Router 的主要特性
Vue-Router 主要有以下几个特性：
- 嵌套的路由配置
- 视图的嵌套
- 带参数的路由
- 编程式的路由
- 视图过渡效果
- 支持 HTML5 历史模式和 hash 模式路由
如何使用 Vue-Router 构建 SPA 应用
安装 Vue-Router
在开始之前，我们需要先安装 Vue-Router。使用以下命令即可：
npm install vue-router
创建路由文件
在 Vue 项目中创建一个新的文件夹 router，并以 index.js 命名，这个文件将包含整个路由的配置：
-- -------------------- ---- -------
------ --- ---- ------
------ ------ ---- -------------
----------------
----- ------ - --- --------
----- ----------
----- ---------------------
------- --
----- ----
----- -------
---------- -- -- --------- ----------------- ------- -- ---------------------
---
---
------ ------- -------上述代码中，我们在 router 中定义了我们的路由配置，包括写路由路径、路由名称、以及相应的组件。
使用路由
在创建完成路由配置之后，我们需要在 main.js 中使用我们定义的路由：
-- -------------------- ---- ------- ------ --- ---- ------ ------ --- ---- ------------ ------ ------ ---- ----------- ------------------------ - ------ --- ----- ------- ------- --- -- ------- ------------------
上述代码中，我们将 router 作为 new Vue 的一个选项，这样我们就能在应用程序中使用路由了。
处理常见的选项卡（Breadcrumb）问题
现在，我们已经可以使用 Vue-Router 构建 SPA 应用了。但是，在实际开发中，我们可能会遇到选项卡（Breadcrumb）这样的问题。这时候，我们需要让选项卡与路由保持同步，以便让用户在使用选项卡时可以切换到对应的路由。
创建选项卡组件
首先，我们需要创建一个选项卡组件，它将显示所有可用路由的名称，并根据用户所选的路由更新自身的状态。
-- -------------------- ---- -------
----------
--- -------------------
--- ------------ -- ------- ----------------- --------- ------- ------------ ---
------------ ------------------- ---------- ----------------
-----
-----
-----------
--------
------ ------- -
----- -------------
------ -
------ -
------- ---
--
--
--------- -
-------------------
--
------ -
-------- -
-------------------
--
--
-------- -
------------- -
--- ---- - ---
----------- - ------------------------------- -- -
----- ---- - ---------- -- -------
----- ----- - -
-----
----- ---
------- ------
--
-- ----------- --- ---- -
---- - ------------------------
---------- - -----
- ---- -
---------- - ----
-
-- ----------------- --- ----------- -
------------ - -----
-
------ ------
---
--
--
--
---------上述代码中，我们使用 Vue.js 的 watch 函数来监听路由的变化。在路由变化时，我们会调用 buildCrumbs() 方法来重新构建选项卡。构建过程中，我们使用 matched 数组中的路由对象和当前路由对象来判断选项卡是否应处于活动状态。
引入选项卡组件
一旦我们有了选项卡组件，我们就需要在我们的应用程序中使用它。我们可以在应用程序的主模板中包含选项卡组件：
-- -------------------- ---- -------
----------
---- ---------
----------- --
------------ --
------
-----------
--------
------ ---------- ---- ------------------------------
------ ------- -
----- ------
----------- -
-----------
--
--
---------这样，我们就完成了 Vue-Router 的选项卡（Breadcrumb）的处理了。
示例代码
如果您想要查看完整的示例代码，可以访问下面的链接：
https://github.com/vuejs/vue-router/tree/dev/examples/breadcrumb
总结
Vue-Router 是一个强大的 Vue.js 路由管理器，可以让我们轻松地将组件和 URL 路径对应起来，并且可以处理选项卡（Breadcrumb）这样的常见问题。在实际开发中，我们可以使用 Vue-Router 构建 SPA 应用，提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cc9d485ad90b6d0429f686