Vue-router原理：如何实现更新视图但是不重新请求页面

参考：
【前端路由】Vue-router 中hash模式和history模式的区别
浅谈vue-router原理
从vue-router看前端路由的两种实现
vue-router工作原理概述和问题分析

vue-router主要通过hash模式和history模式来实现前端路由，更新视图而不重新请求页面。

• hash：即地址栏URL中的#符号
• history-利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。pushState()不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应

我们在开发的时候默认使用hash模式(其url后永远带着#号)，那
1、为什么要使用history模式？

• history模式没有#号，看起来更规范更正常，适合推广宣传
• 开发app的适合会有分享页面，将这个页面分享到第三方的app里时，有的app不允许url带有#符号

但是，
2、history模式也存在一个问题
在访问二级页面的时候，做刷新操作，会出现404错误，此时需要后端人员配置一下代理服务器(apache或者nginx)的url重定向，重定向到你的首页路由上。history模式下，前端的url必须和后端发起请求的url一致，如http://www.baidu.com/a/ ，如果后端缺少对/a的处理，将返回404错误。
(.1) history模式下配置Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

(2) history模式下配置nginx

location / {
  try_files $uri $uri/ /index.html;
}

3、hash模式不会返回404错误，为什么？
hash模式下，仅hash符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。即hash虽然出现在URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

总结：

传统的路由：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发
前端路由：不涉及服务器，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。