详解从Vue-router到html5的pushState
|
最近在用vue的时候突然想到一个问题 首先，我们知道vue实现的单页应用中一般不会去刷新页面，因为刷新之后页面中的vuex数据就不见了。 其次，我们也知道一般情况下，url变更的时候，比如指定location.href、history.push、replace等，页面就会刷新。 那么问题来了，vue页面的页面跳转时怎么实现的？没刷新页面么？没刷新页面，又要改变url，加载新内容怎么做的？ 去翻了一下vue-router的源码，找到这样一段 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,route => { 再看看方法内部 答案就是html5在history中新增加的方法：pushState和replaceState。这两个又是干啥的呢？（两个十分类似，以下以pushState为例说明，区别和push与replace一致） HTML5的pushState() 首先看看这个是干什么的 pushState方法就是向history中push一条记录，更改页面url，但是不刷新页面，不刷新页面，不刷新页面。不刷新页面，这点很关键，这和下面的操作很相似 知道干嘛的了，再看看API怎么用的 state是一个对象，具体内容除了最大640KB之外没有别的限制，比如在vue中是生成了一个key存进去了。若无特殊需要传个null即可。这个state可以在history或者popstate的事件中看到 history中的
popstate中的
title这个参数目前没什么用处，可能是给以后预留的参数，暂时用null就好了 url很明显，就是替换后的url了。url可以接受绝对地址和相对地址，设置绝对地址的时候，要保证域名和当前域名一致，否则汇报如下错误 HTML5的popstate()
{
console.log('popstate',)
})
前面pushState中传入的state对象，可以在这边接收到，并根据需要去做一些处理。 说到这，vue-router是怎么实现页面“刷新”但不刷新的就知道了吧。 vue-router就是利用pushState这个属性，在页面前进的时候动态改变history的内容，添加一条记录，接着location跟着改变。同时根据router前往的路由获取对应的js资源文件并挂载到目标dom上实现页面内容的更新，但是页面本身并没有刷新。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
