详解从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作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
Apr 20 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
JsChart组件使用详解
Mar 04 Javascript
微信小程序实现bindtap等事件传参
Apr 08 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
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
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php中使用url传递数组的方法
2015/02/11 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
使用css3实现的windows8开机加载动画
2014/12/09 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
现金会计岗位职责
2013/12/05 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
预备党员政审材料
2014/02/04 职场文书
小学生植树节活动总结
2014/07/04 职场文书
投标邀请书范本
2015/02/02 职场文书
学校开除通知书
2015/04/25 职场文书
第一军规观后感
2015/06/12 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
2016年学校招生广告语
2016/01/28 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书