# 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 对象具体的类别执行不同操作