Vue-Router 是 Vue.js 官方提供的用于进行前端路由管理的插件，能够实现单页面应用程序中的路由功能。本文将介绍 Vue-Router 的使用实例和 Hash 方式和 History 方式切换，以供初学者参考。
Vue-Router 的使用
安装 Vue-Router
首先，在使用 Vue-Router 之前，需要安装该插件。在命令行中执行以下命令：
--- ------- ----------
安装完成之后，在 main.js 文件中引入 Vue-Router 并使用：
------ --- ---- ----- ------ --------- ---- ------------ ------------------
配置路由
接下来，我们需要配置路由。在新建一个路由文件夹，比如 router 文件夹，用于存放路由相关代码。在该文件夹中新建一个 index.js 文件来配置路由：
------ --- ---- -----
------ ------ ---- ------------
---------------
------ ------- --- --------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
--在该代码中，我们首先使用 Vue.use() 方法来注册 Vue-Router 插件，接着使用 export default 语法将一个新的 Router 实例导出作为路由的配置。在 routes 数组中我们定义了两个路由的对象，每一个路由对象都由三个属性组成：path 表示路由的路径，name 表示路由的名称，component 表示路由所对应的组件。
接下来，我们需要在 Vue 实例中配置 router 实例：
------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ---------- --- ----- --- ------- ------- ------- - -- ------ --
这样，我们就可以在 App.vue 组件中使用 标签展示路由。
----------
-----
------------ -------------------------
------------ -------------------------------
---------------------------
------
-----------当路由路径变化时， 标签所包含的组件也会随之变化。
Hash 方式和 History 方式切换
在 Vue-Router 中，有两种路由方式可以选择：Hash 模式和 History 模式。
Hash 模式
Hash 模式即在地址中加上 #，然后通过监听 hashchange 事件来切换路由。该模式需要设置 router 的 mode 属性为 'hash'：
------ ------- --- --------
----- -------
------- -
-- ---
-
--启用 Hash 模式后，我们在浏览器地址栏中输入 ‘http://localhost:8080/#/about’，路由实例就会去检查 hash，并针对相应的路由做出相应的处理。在页面上，路由的切换将发生在当前的页面中间。
History 模式
History 模式则是利用 HTML5 History API，在地址中去除 #，使 URL 更加美观。该模式需要设置 router 的 mode 属性为 'history'：
------ ------- --- --------
----- ----------
------- -
-- ---
-
--启用 History 模式后，我们在浏览器地址栏中输入 ‘http://localhost:8080/about’，路由实例将自己匹配到对应的路由并处理。在页面上，路由切换将会像正常的跳转一样，浏览器会向服务器发送一个 GET 请求，服务器会返回该页面的 HTML 内容，这些操作都是不需要刷新页面的。
需要注意的是，使用 History 模式需要特别的配置来保证路由正常工作。我们需要在后端服务器上进行一些配置，以确保路由到正确的路由文件。否则，当用户在页面中刷新时，服务器将无法找到匹配的路由并返回 404 页面。
总结
Vue-Router 是 Vue.js 中重要的插件之一，可以帮助开发人员快速实现前端路由管理。而 Hash 模式和 History 模式则是路由选择时需要考虑的两个方面，Depend on 个人选择。本文展示了 Vue-Router 的使用实例，以及详细地介绍了 Hash 模式和 History 模式以供参考。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6469913b968c7c53b0971e57