Vue-Router中hash与history简单理解

712 阅读1分钟

对于 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]) :**更改当前的历史记录,参数同上