vue-router路由hash和history原理及history需后台配置

hash模式模式的原理
比如这个 URL：http://www.abc.com/#/hello，window是可以监听到哈希值的变化的，依赖onhashchage事件，
这就意味着：当url中的哈希值发生了变化，无需发起http请求，window也可以监听到这种变化，并按需加载前端的组件模块

history 模式的原理
比如这个 URL：http://www.abc.com/hello，
H5新推出的两个神器：pushState与replaceState，history也是基于H5的这两个方法上实现的
作用就是将url替换且不刷新，好比挂羊头卖狗肉，http并没有去请求服务器该路径下的资源，
缺点一旦刷新就会暴露这个实际不存在的“羊头”，显示404。
如何解决404弊端，这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html)

具体分析history模式的情况

只配置前端的情况
首先，我们将mode设置为history，但不配置后端。然后，假如我们的路由是长这个样子的：

const routes = [
 {path: '/home', component: Home},
 {path: '/', redirect: '/home'}
];

我们用nginx部署项目，然后在地址栏输入http://localhost:8080（这里配置的端口是8080），
你会发现地址栏之后会变为http://localhost:8080/home，并且看起来一切正常，
似乎路由也可以正常切换而不会发生其他问题（实际上会发生问题，后面会进行讨论）。
看起来好像不需要按官网告诉我们的那样配置后端也能实现history模式，但如果你直接在地址栏输入http://localhost:8080/home，
你会发现你获得了一个404页面。

那么http://localhost:8080为什么可以（部分）正常显示呢？道理其实很简单，你访问http://localhost:8080时，nginx默认去找
项目根目录下的index.html我们打生产包的时候就有index.html，但如果直接访问http://localhost:8080/home，
静态服务器会去目标目录下寻找home文件，目标目录下有这个文件吗？没有！所以自然就404了。

我们需要对后端（这里即nginx）进行一些配置，我们所想要的情况就是：输入http://localhost:8080/home，但最终返回的也是index.html，
然后vue-router会获取home作为参数，对前端页面进行变换。那么在nginx中，谁能做到这件事呢？答案就是try_files。

location / { 
 root /data/www; 
 index index.html; 
 try_files $uri $uri/ /index.html; 
}

在www这个目录中，没有子目录，只有一个index.html和一些压缩后的名称是hash值的.js文件。
当我们请求http://localhost:8080/home这个地址时，首先查找有无home这个文件，没有；再查找有无home目录，也没有。
所以最终会定位到第三个参数从而返回index.html，按照这个规则，所有路由里的url路径最后都会定位到index.html。
vue-router再获取参数进行前端页面的变换，至此，我们已经可以通过http://localhost:8080/home这个地址进行成功地访问了。

例如项目地址是：http://localhost:8080/dist/#/

module.exports={ 
  publicPath: '/dist', 
}

new Router({ 
  mode:'history', 
  base: '/dist' 
})

location / { 
   try_files $uri $uri/ /dist/index.html; #意思是找不到文件或者目录找到该文件 
}

参考：https://www.jianshu.com/p/aaedef319ffa

https://www.jianshu.com/p/557f2ba86892

https://blog.csdn.net/WebDestiny/article/details/100269977