vue路由有哪几种模式？原理是什么？

vue路由有哪几种模式？原理又是什么？

在 Vue 路由中，有两种常见的路由模式：hash 模式和 history 模式。

1. Hash 模式：

   • 在 hash 模式下，URL 中的路由路径会以 # 开头，例如 http://example.com/#/home。
   • 当 URL 中的 hash 值发生变化时，浏览器不会向服务器发送请求，而是触发浏览器的 hashchange 事件，从而实现页面的切换。
   • Vue Router 通过监听 hashchange 事件，在 URL 的 hash 值变化时，匹配对应的路由进行页面的更新。
   • Hash 模式的优点是在不需要特殊的服务端配置时即可使用，但缺点是 URL 中会有冗余的 # 符号。

2. History 模式：

   • 在 history 模式下，URL 中的路由路径是正常的路径，例如 http://example.com/home。
   • 为了使用 history 模式，需要后端服务器进行一定的配置，以确保当用户访问页面时始终返回应用的主页（index.html），而不是 404 错误。
   • Vue Router 中通过使用 HTML5 的 History API，即 pushState() 和 replaceState() 方法来改变浏览器的 URL，同时利用 popstate 事件进行路由的监听。
   • History 模式的优点是 URL 更加友好，没有冗余的符号，可以使用正常的路径进行页面的导航。但缺点是需要后端服务器的支持，并且需要额外的配置来处理路由。

在实际开发中，可以通过在 Vue Router 的创建时设置 mode 属性来指定使用的路由模式，默认为 hash 模式。

需要注意的是，无论使用哪种模式，Vue Router 都会通过监听 URL 的变化来匹配对应的路由，然后根据路由配置展示相应的组件内容。这种匹配和渲染的原理是基于前端的路由机制，通过 JavaScript 来修改浏览器的 URL 并动态加载不同的组件内容，从而实现单页应用的页面切换效果。