路由跳转有两个模式可以选择 一个是hash 一个是 history 二者有什么区别呢 我们来细说
首先是路由默认的hash模式
hash模式最显著的特点就是会在url链接后面加是一个#
随便写一个例子
www.abc.com/#/def/hijk
#我们称之为哈希符号 而#后面的值我们都称之为哈希值
# 后面的路径发生变化时，浏览器并不会重新发起请求，这个时候服务器接收不到任何的值
对服务器没有影响，会在浏览器的访问历史中增加一个记录，使用 "后退" 按钮，就可以回到上一个位置。
我们假设一个场景当前的网址是www.abc.com/#/def
我们点击的一个路由 进入了www.abc.com/#/def/hijk
虽然我们点击了 页面发送了改变 但是我们并没有向服务器发送请求 我们的页面也没有重新加载浏览器还是继续保持在之前的页面
但是我们页面的内容确实变了 是因为发送了页面跳转 并不是从新去加载了
网页跳转 不等于 页面加载 页面的跳转都是在客户端进行操作
特点：
- url中带一个 #
- 可以改变URL，但不会触发页面重新加载，所以不算发送了一个HTTP请求
hash通过window.onhashchange的方式，来监听hash的改变，借此实现无刷新跳转的功能- 只能修改 # 后面的部分，因此只能跳转与当前 URL 同文档的 URL 同时 #后面的部分我们称之为
哈希值并且哈希值它不会作为路径的一部分随着 http 请求，发给服务器
然后就是我们需要自己设置的histroy模式了
histroy模式他是使用到了H5的新特性 pushState() 和 replaceState() 方法。
为什么要有他？我想vue的团队只是不想在路径上加上# 或者说使用histroy的一些特有API吗
OK我们来说一下
history 是路由的另一种模式，由于 hash 模式会在 url 中带#，如果不想要带 #的话，我们可以使用路由的 history 模式
并且因为是使用的H5的方法 所以对浏览器是有兼容性的要求的 它也符号者vue路由的一个特别重要的原则
果是用户在当前用histroy模式操作切换页面的话，URL会被改变、浏览器不会刷新页面也不会往服务端发请求 这一点和hash是一样的
举例子
正常的页面浏览
https://github.com/xxx 刷新页面
https://github.com/xxx/yyy 刷新页面
https://github.com/xxx/yyy/zzz 刷新页面使用vue的histroy模式
https://github.com/xxx 刷新页面
https://github.com/xxx/yyy 前端跳转，不刷新页面
https://github.com/xxx/yyy/zzz 前端跳转，不刷新页面但是 请注意！
如何我们在histroy模式下面访问
www.abc.com 我们一步步的进行点击 然后进入
www.abc.com/def/hijk 没有问题
但是如果我们直接在浏览器的链接栏www.abc.com/def/hijk 那就抱歉了会出错！
因为当你一步步点击的时候URL会被改变、浏览器不会刷新页面也不会往服务端发请求，但会触发代码内的监听事件从而改变页面内容，所以无需用到服务器也可以自由切换页面了。但是这里有个很核心的点就是URL会改变，即有新的URL诞生，所以如果这时用户主动刷新页面（F5） 你也可以理解为你可以理解为用户复制url后在新弹窗打开的行为，浏览器发送给服务端的是新的URL 如何没有对应的接口地址 那就会出错
如何解决呢？就是服务器进行单独配置，弄一个接口去专门匹配 例如上面的www.abc.com/def/hijk
而hash就不会遇到这个问题
好的总结一下
至此我们使用知道了vue-roter 的两种路由模式，及差异化，简单来讲就是，hash 路由兼容梗好，但是带#显得丑些， histroy 和正常 url 路径一样，但是需要在服务器进行单独配置。大家可以根据自己的喜好去按需使用。
标签：hash,URL,跳转,history,com,路由,页面
From： https://www.cnblogs.com/tomxiao/p/16613045.html