# Vue-router 原理

“更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：

• 利用URL中的hash（“#”）

• 利用History interface在 HTML5中新增的方法

# Hash模式

vue-router 默认使用 Hash 模式。

使用url的hash来模拟一个完整的 url。此时 url 变化时，浏览器是不会重新加载的。

Hash(即#)是 url 的锚点，代表的是网页中的一个位置，仅仅改变#后面部分，浏览器只会滚动对应的位置，而不会重新加载页面。

Hash仅仅只是对浏览器进行指导，而对服务端是完全没有作用的!它不会被包括在 http 请求中，故也不会重新加载页面。同时 hash 发生变化时，url 都会被浏览器记录下来，这样你就可以使用浏览器的后退了。

# History模式

这种模式利用了 HTML5 History 新增的 pushState() 和 replaceState() 方法。

除了之前的 back，forward，go 方法，这两个新方法可以应用在浏览器历史记录的增加替换功能上。使用 History 模式，通过历史记录修改 url，但它不会立即向后端发送请求。

注意点: 虽然 History 模式可以丢掉不美观的#，也可以正常的前进后退，但是刷新 f5 后，此时浏览器就会访问服务器，在没有后台支持的情况下，此时就会得到一个 404!

官方文档给出的描述是:"不过这种模式要玩好，还需要后台配置支持。因为我们的应用是单个客户端应用，如果后台没有正确的配置，当用户直接访问时，就会返回 404。所以呢，你要在服务端增加一个覆盖所有情况的的候选资源;如果 url 匹配不到任何静态资源，则应该返回同一个index。html页面。"

# router 方法

VueRouter 类中的 onReady(), push() 等方法只是一个代理，实际是调用的具体 history 对象的对应方法，在 init() 方法中初始化时，也是根据 history 对象具体的类别执行不同操作