什么是 Vue Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得非常简单和优雅。路由就是页面之间的跳转，相当于前端页面的导航功能。
Vue Router 可以实现以下功能：
- 动态路由匹配
- 嵌套路由
- 命名路由
- 路由状态管理
- 路由过渡效果
hash 模式与 history 模式
在 Vue Router 中，有两种路由模式：hash 模式和 history 模式。
hash 模式
hash 模式使用 URL 中的 hash（即 # 后面的内容）来作为路由，例如：http://example.com/#/home。
在 hash 模式下，浏览器不会向服务器发起请求，而是在本地进行路由的处理。因此，hash 模式下的页面刷新不会导致路由的变化，而是每次刷新都会在当前路由下重新加载页面内容。
history 模式
history 模式使用正常的 URL 地址，例如：http://example.com/home。
在 history 模式下，路由由浏览器和服务器共同协作处理。通过 history.pushState() 方法可以在不重新加载页面的情况下改变当前 URL，从而实现页面的跳转。
在 Vue Router 中使用 hash 模式与 history 模式
在 Vue Router 中，我们可以使用 hash 模式或者 history 模式来进行路由管理，具体的配置如下：
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
---------------
------ ------- --- --------
----- ------- -- ---- --
-- ----- ---------- -- ------- --
------- -
-
----- ----
----- -------
---------- -- -- --------------------------
--
-
----- ---------
----- --------
---------- -- -- ---------------------------
-
-
--我们可以通过在路由配置中设置 mode: 'hash' 来启用 hash 模式，也可以通过设置 mode: 'history' 来启用 history 模式。
应用场景
hash 模式和 history 模式各有优缺点，不同的应用场景需要不同的路由模式来进行管理。
对于传统的多页面应用，我们可以使用 history 模式来进行路由管理，因为每个页面都是由服务端来生成的，可以通过 history.pushState() 方法进行 URL 跳转。
而对于大多数的单页面应用（SPA），我们可以使用 hash 模式来进行路由管理。因为 SPA 是由前端路由控制的，而 hash 模式下浏览器不会向服务器发起请求，因此可以更好地支持前端路由，并且可以避免使用 history.pushState() 方法可能会改变浏览器的前进后退功能。
总结
Vue Router 是一个非常强大的路由管理器，可以帮助我们构建出完善的单页面应用。在路由模式的选择上，我们需要根据不同的应用场景来进行选择，以达到最佳的用户体验与性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64731b95968c7c53b009d984