详解从Vue-router到html5的pushState


Posted in Javascript onJuly 21, 2018

最近在用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中的

详解从Vue-router到html5的pushState

popstate中的

详解从Vue-router到html5的pushState

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/h5/indexasdasd'.
at History.pushState (https://aixuedaiimg.oss-cn-hangzhou.aliyuncs.com/static/m/js/alog/v1.0.0/alog.min.js:1:23259)
at <anonymous>: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上实现页面内容的更新,但是页面本身并没有刷新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 经典动画菜单效果代码
Jan 26 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
JQuery实现动态操作表格
Jan 11 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
webpack优化的深入理解
Dec 10 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 #Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 #Javascript
vue项目中添加单元测试的方法
Jul 21 #Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 #Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 #jQuery
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
Smarty模板配置实例简析
2019/07/20 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
Angular的$http与$location
2016/12/26 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
详解JavaScript的变量
2019/04/04 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
Python求导数的方法
2015/05/09 Python
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
django框架ModelForm组件用法详解
2019/12/11 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
python如何调用百度识图api
2020/09/29 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书