Vue-router 中hash模式和history模式的关系

Vue-router 中hash模式和history模式的关系

众所周知，vue+vue-router能够构建一个SPA单页面应用， 打包后只会生成一个index.html文件，而项目内页面的切换其实仅仅只是视图的切换而已，并不会重新向服务器发起请求，这里来说说我对vue-router的几种模式的理解

通过编辑器提示不难看出，路由有三种模式

abstract模式基本上没用过，也百度查了下，作用好像是用来在不支持浏览器API的环境中，充当fallback，完成页面内嵌什么的， 这里就不多做描述了

不选的话默认是hash模式

这里主要说一下hash和history的区别

最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的

hash ——

类似a链接的锚点，用的是location对象
 浏览器地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history ——

history模式用的是windows的history对象 ，  新增的 pushState() 和 replaceState() 方法, 这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由.

部分内容摘自：  https://www.jb51.net/article/144341.htm （如有错误欢迎评论）

总结

hash模式和history模式简单点来说就是一个用的是 location对象的hash ， 一个用的是history对象， hash会有个比较丑的# , 然后，hash模式出现匹配不了的路由也不会重新去服务器请求资源，

history则是后端如果没有对应的路由的话则会报404错误，需要后端另外做操作，比如url没匹配的话返回一个首页

最后贴一张nodejs官网上看到的一条完整的地址的结构图