详解从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中ajax调用json数据的使用说明
Mar 17 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
JS数据类型分类及常用判断方法
Nov 19 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
zend framework多模块多布局配置
2011/02/26 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP中cookie知识点学习
2018/05/06 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
Vue异步加载about组件
2017/10/31 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
js实现简单页面全屏
2019/09/17 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python实现报表自动化详解
2017/11/16 Python
Python中的取模运算方法
2018/11/10 Python
python获取Pandas列名的几种方法
2019/08/07 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
中层干部岗位职责
2013/12/18 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
节能宣传周活动总结
2014/05/08 职场文书
爱心捐款感谢信
2015/01/20 职场文书
学校教师培训工作总结
2015/10/14 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书