对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义。前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求。
众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别。
hash模式
即地址栏 URL 中的 #
符号后内容。
比如这个 URL:http://www.abc.com/#/hello
,hash 的值为 #/hello
。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
hash模式背后的原理是onhashchange事件
window.onhashchange = function(event){ console.log(event.oldURL, event.newURL)}
history 模式
通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。
前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id
。如果后端缺少对 /book/id
的路由处理,将返回 404 错误。
新增API:
**1.history.pushState(data, title [, url]):**往历史记录堆栈顶部添加一条记录;data会在onpopstate事件触发时作为参数传递过去;title为页面标题,当前所有浏览器都会忽略此参数;url为页面地址,可选,缺省为当前页地址
**2.history.replaceState(data, title [, url]) :**更改当前的历史记录,参数同上