从Vue-router到html5中pushState的流程分析
这篇文章主要介绍了从Vue-router到html5中pushState的流程分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、成都网站制作、谷城网络推广、小程序制作、谷城网络营销、谷城企业策划、谷城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供谷城建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com
最近在用vue的时候突然想到一个问题
首先，我们知道vue实现的单页应用中一般不会去刷新页面，因为刷新之后页面中的vuex数据就不见了。
其次，我们也知道一般情况下，url变更的时候，比如指定location.href、history.push、replace等，页面就会刷新。
那么问题来了，vue页面的页面跳转时怎么实现的？没刷新页面么？没刷新页面，又要改变url，加载新内容怎么做的？
去翻了一下vue-router的源码，找到这样一段
export class HTML5History extends History {
...
push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
this.transitionTo(location, route => {
pushState(cleanPath(this.base + route.fullPath))
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
}, onAbort)
}
replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
const { current: fromRoute } = this
this.transitionTo(location, route => {
replaceState(cleanPath(this.base + route.fullPath))
handleScroll(this.router, route, fromRoute, false)
onComplete && onComplete(route)
}, onAbort)
}
...
}再看看方法内部
export function pushState (url?: string, replace?: boolean) {
saveScrollPosition()
// try...catch the pushState call to get around Safari
// DOM Exception 18 where it limits to 100 pushState calls
const history = window.history
try {
if (replace) {
history.replaceState({ key: _key }, '', url)
} else {
_key = genKey()
history.pushState({ key: _key }, '', url)
}
} catch (e) {
window.location[replace ? 'replace' : 'assign'](url)
}
}答案就是html5在history中新增加的方法：pushState和replaceState。这两个又是干啥的呢？（两个十分类似，以下以pushState为例说明，区别和push与replace一致）
HTML5的pushState()
首先看看这个是干什么的
pushState方法就是向history中push一条记录，更改页面url，但是不刷新页面，不刷新页面，不刷新页面。不刷新页面，这点很关键，这和下面的操作很相似
window.location.href = window.location.href + '#a=b'
知道干嘛的了，再看看API怎么用的
history.pushState(state, title, url);
state是一个对象，具体内容除了最大640KB之外没有别的限制，比如在vue中是生成了一个key存进去了。若无特殊需要传个null即可。这个state可以在history或者popstate的事件中看到
history中的
popstate中的
title这个参数目前没什么用处，可能是给以后预留的参数，暂时用null就好了
url很明显，就是替换后的url了。url可以接受绝对地址和相对地址，设置绝对地址的时候，要保证域名和当前域名一致，否则汇报如下错误
Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'https://www.baidu.com/' cannot be created in a document with origin 'https://mocard-aliyun1.chooseway.com:8443' and URL 'https://mocard-aliyun1.chooseway.com:8443/views/h6/indexasdasd'.
at History.pushState (https://aixuedaiimg.oss-cn-hangzhou.aliyuncs.com/static/m/js/alog/v1.0.0/alog.min.js:1:23259)
at:1:9
HTML5的popstate()
popstate与pushState相对应，主要在页面url变更的时候触发，一般绑定在window对象下
window.addEventListener('popstate', e => {
console.log('popstate', )
})前面pushState中传入的state对象，可以在这边接收到，并根据需要去做一些处理。
说到这，vue-router是怎么实现页面“刷新”但不刷新的就知道了吧。
vue-router就是利用pushState这个属性，在页面前进的时候动态改变history的内容，添加一条记录，接着location跟着改变。同时根据router前往的路由获取对应的js资源文件并挂载到目标dom上实现页面内容的更新，但是页面本身并没有刷新。
感谢你能够认真阅读完这篇文章，希望小编分享的“从Vue-router到html5中pushState的流程分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
当前名称：从Vue-router到html5中pushState的流程分析
本文链接：http://mswzjz.cn/article/gcsghh.html