做一个总结和学习跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言哈💕~~~~，谢谢大家⭐️⭐️⭐️~~~
vue-router的工作原理？
vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：
- 利用URL中的hash（“#”）
- 利用History interface在 HTML5中新增的方法
在vue-router中，它提供了mode参数来决定采用哪一种方式mode参数：
- 默认hash
- 手动设置为history
hash模式的实现原理
- vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL,当URL改变时，页面不会重新加载。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值称为hash值。
- 路由的hash模式是利用了window可以监听onhashchange事件来实现的，也就是说hash值是用来指导浏览器动作的，对服务器没有影响，HTTP 请求中也不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash 模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据。
history模式实现原理
HTML5 提供了 History API 来实现 URL 的变化，使用 window.onpopstate 对浏览器地址进行监听，其中最主要的 API 有以下两个：history.pushState()和history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，
window.history.pushState(null, null, path);window.history.replaceState(null, null, path);
注意：HTML5中history有两个新增的API，分别是history.pushState() 和 history.replaceState()，它们都接收3个参数，即状态对象（state object）、标题（title）和地址（URL）。
history 路由模式的实现主要基于存在下面几个特性：
1.pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
2.我们可以使用 pushState 事件来监听 url 的变化，从而对页面进行跳转(渲染)；
3.history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转(渲染)。
abstract模式实现原理
不涉及和浏览器地址的相关记录。流程跟 hash 模式一样，通过数组维护模拟浏览器的历史记录栈 服务端下使用。使用一个不依赖于浏览器的浏览器历史虚拟管理后台
总结：
hash 模式和 history 模式都是通过 window.addEventListener() 方法监听 hashchange 和 popState 进行相应路由的操作。可以通过 back、foward、go 等方法访问浏览器的历史记录栈进行各种跳转。而 abstract 模式是自己维护一个模拟的浏览器历史记录栈的数组。
通常情况下，我们会选择 history 模式，原因就是 hash 模式下 url 带 # 会显得不美观；但实际上，这样选择一不小心也会出问题；比如：当用户直接在用户栏输入地址并带有参数时：
- hash 模式：xxx.com/#/id=2 请求地址为 xxx.com，没有问题；
- history 模式：xxx.com/id=2 请求地址为 xxx.com/id=2，如果后端没有对应的路由处理，就会返回 404错误；
为解决 history 模式的 404 问题，vue-router 提供的方法是：
在服务端增加一个覆盖所有情况的候选资源：如果 url 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是 app 依赖的页面。
给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 vue 应用里面覆盖所有的路由情况，然后再给出一个404 页面。或者，如果你使用 node.js 服务器，你可以用服务端路由匹配到来的url，并在没有匹配到路由的时候返回404，以实现回退。
感谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕💕💕
后续会持续更新记录😊~~~
