详解从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 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
Js基础学习资料
Nov 23 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
详解如何在JS代码中消灭for循环
Dec 11 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python实现图片文件批量重命名
2020/03/23 Python
python PIL模块的基本使用
2020/09/29 Python
Django实现随机图形验证码的示例
2020/10/15 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
成考报名单位证明范本
2014/01/16 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
政风行风评议工作总结
2014/10/21 职场文书
乐山大佛导游词
2015/02/02 职场文书
普宁寺导游词
2015/02/04 职场文书
vue3不同环境下实现配置代理
2022/05/25 Vue.js