VUE 实现路由的基本原理

路由

基本概念

在前端技术早期，所有页面的跳转通过更改url,浏览器页面刷新获取新的页面内容，这种粗糙的交互方式，一直等待优化。
后来，改变发生了——Ajax 出现了，它允许人们在不刷新页面的情况下发起请求，实现内容的更新。伴随的还有“不刷新页面即可更新页面内容”这种需求。在这样的背景下，出现了 SPA（单页面应用）。最初的spa 应用，只有一个URL地址，大家在使用的过程中就发现了两个问题，1.无法定位当前页面的位置，不知道前后都是那些页面。2.对SEO非常不友好。
为了解决这两个问题就诞生了前端路由。

vue路由的基本原理

其实vue原理体现在vue路由配置项中的“history”。
类型: string
默认值:“hash” (浏览器环境) | “abstract” (Node.js 环境)
可选值: “hash” | “history” | “abstract”

hash

hash模式：地址上有“#”（哈希字符），是hash模式；只要是带有“#”的，都是前端路由。
hash模式的工作原理是hashchange事件，可以在window监听hash的变化。类似：http://www.xxx.com/#/home，url的hash是 (#) 及后面的那部分。常用作锚点在页面内进行导航，改变 URL 中的 hash 部分不会引起页面刷新。

history

history模式：例如：http://yoursite.com/user/id，这种很顺滑的；
history模式的工作原理是HTML5 规范中提供了 history.pushState 和history.replaceState 来进行路由控制。通过window监听popstate，使用pushState、replaceState可以实现改变 url ,向服务器发送请求,但是不会引起页面刷新。

abstract

abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。基于内存的历史。该历史的主要目的是为了处理服务端渲染。它从一个不存在的特殊位置开始。用户可以通过调用 router.push 或 router.replace 将该位置替换成起始位置。

history hash的区别

hash模式和history模式的区别主要体现在原理、表现、兼容性、以及与后端交互等方面。以下是详细介绍：

原理不同

hash模式通过监听浏览器窗口的onhashchange事件来响应URL中#符号后的变化，而History模式利用浏览器提供的pushState和replaceState方法，并通过监听popstate事件来模拟历史记录的改变，从而实现路由的更新。

表现不同

在hash模式下，URL中会包含#符号以及后面的字符，这在地址栏中会显示为带有#的URL，而在history模式下，URL中不包含#符号，因此地址栏中不会显示#符号。
兼容性不同。Hash模式向下兼容，可以兼容到IE8，而history模式则需要浏览器支持HTML5，至少需要IE10。
与后端交互不同。hash模式中，URL的变化不会导致浏览器向服务器发送请求，因此对后端没有影响，改变Hash值不会重新加载页面，而history模式中，URL的变化会触发向服务器发送请求的行为，如果后端没有正确处理，可能会导致404错误。