“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：
- 利用URL中的hash（“#”）(默认是hash)
- 利用History interface在 HTML5中新增的方法
1.hash
hash（“#”）符号的本来作用是加在URL中指示网页中的位置：
#符号本身以及它后面的字符称之为hash，可通过window.location.hash属性读取。它具有如下特点：
hash虽然出现在URL中，但不会被包括在HTTP请求中。它是用来指导浏览器动作的，对服务器端完全无用，因此，改变hash不会重新加载页面 可以为hash的改变添加监听事件：
window.addEventListener("hashchange", funcRef, false)
每一次改变hash（window.location.hash），都会在浏览器的访问历史中增加一个记录。
利用hash的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了。
2.history
History interface是浏览器历史记录栈提供的接口，通过back(), forward(), go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。
从 HTML5 开始，History interface提供了两个新的方法：pushState(), replaceState()使得我们可以对浏览器历史记录栈进行修改
404错误：
1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 www.abc.com 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
2、history模式下，前端的url必须和实际后端发起请求的url一致，如www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。
参考：Entronad 【源码拾遗】从vue-router看前端路由的两种实现
凌晨四点半er 遇到面试vue-router原理
