vue-router的hash模式和history模式,
hash模式背后的原理是onhashchange
事件,可以在window对象上监听这个事件:
window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash; }
更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,同时点击后退时,页面字体颜色也会发生变化。这样一来,尽管浏览器没有请求服务器,但是页面状态和url一一关联起来,后来人们给它起了一个霸气的名字叫前端路由,成为了单页应用标配。
随着history api的到来,前端路由开始进化了,前面的hashchange,你只能改变#后面的url片段,而history api则给了前端完全的自由
history api可以分为两大部分,切换和修改,参考MDN,切换历史状态包括back、forward、go
三个方法,对应浏览器的前进,后退,跳转操作,有同学说了,(谷歌)浏览器只有前进和后退,没有跳转,嗯,在前进后退上长按鼠标,会出来所有当前窗口的历史记录,从而可以跳转(也许叫跳更合适):
history.go(-2);//后退两次
history.go(2);//前进两次 history.back(); //后退 hsitory.forward(); //前进
修改历史状态包括了pushState
,replaceState
两个方法,这两个方法接收三个参数:stateObj
,title
,url
history.pushState({color:'red'}, 'red', 'red') history.back(); setTimeout(function(){ history.forward(); },0) window.onpopstate = function(event){ console.log(event.state) if(event.state && event.state.color === 'red'){ document.body.style.color = 'red'; } }
通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。
history模式的问题
通过history api,我们丢掉了丑陋的#,但是它也有个问题:不怕前进,不怕后退,就怕刷新,f5,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。
在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。
转载于:https://www.cnblogs.com/zhouyideboke/p/11187481.html
vue-router的hash模式和history模式,相关推荐
- vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- Use history mode for router? Vue-router 中hash模式和history模式的区别
再通过vue-cli创建项目的时候,会出现 Use history mode for router? 也就是再问你:是不是用history模式来创建路由 hash模式和history模式的不同 最直观 ...
- VueRouter — vue路由hash模式和history模式
目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认 ...
- Vue平凡之路 (一):Vue-router 中hash模式和history模式
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:&qu ...
- vue-router区分hash模式和history模式
总结: hash模式是我们在url后面添加一个#xx触发事件.尽管浏览器没有请求服务器,但是页面状态和url已经关联起来了,这就是所谓的前端路由,单页应用的标配. history模式下浏览器地址不规整 ...
- 【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别 咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- Vue-router 中hash模式和history模式的区别
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:&q ...
- history模式监听_面试题:VueRouter中的 hash 模式和 history 模式有什么区别
面试题:VueRouter中的 hash 模式和 history 模式有什么区别 hash模式 hash 模式的路由中带有 # 号 hash 模式通过 window.onhashchange 方法监听 ...
- 单页面应用(SPA)前端路由hash 模式 VS history 模式
文章目录 单页面应用(SPA) 前端路由的由来 前端路由 hash 模式 history 模式 hash.history优缺点 单页面应用(SPA) 简单的说 SPA 就是一个WEB项目只有一个 HT ...
最新文章
- “勤奋”,是能让你走出低谷最有效的方法
- R绘制边缘直方图、箱图(Marginal Histogram / Boxplot)
- 目标检测--Accurate Single Stage Detector Using Recurrent Rolling Convolution
- make后gcc出现不全_Linux零基础:C语言和gcc
- Nginx开启Gzip压缩大幅提高页面加载速度
- Spring配置文件-Bean生命周期配置(init-method方法,destory-method方法)
- Linux基本信号的使用
- matlab控制树莓派3b,树莓派3B+ 手机h5网页控制GPIO
- js中return、return false 、return true各自代表什么含义
- dede自定义表单html,织梦自定义表单制作在线订单详细解说
- Win-MASM64汇编语言-PTR运算符
- 洛谷3871 [TJOI2010]中位数 维护队列的中位数
- 将文件复制到FTP服务器时发生错误的解决办法
- python自带intertool模块找不到_Python itertools模块详解
- 20200612每日一句
- uniapp 让支付触手可及,封装了微信支付、QQ支付、支付宝支付、京东支付、银联支付常用的支付方式以及各种常用的接口
- GSM Channel Mode Modify和Channel Mode Modify Acknowledge信令
- mysql的首字母大写_修改MySQL字段为首字母大写
- Appium统计iOS或者Android应用的性能
- HTTP_Wireshark
热门文章
- PolandBall and Forest(并查集)
- 怎么在linux操作python_pythonlinux怎么操作
- 如何把ajax改成同步请求,如何将Ajax请求从异步改为同步
- 【算法竞赛学习】金融风控之贷款违约预测-特征工程
- 浏览器崩溃_如何在浏览器不崩溃的情况下过滤200万行数据?
- 写代码?程序猿?你不能不懂的八大排序算法的Python实现
- 如何从零开始开发一款嵌入式产品(20年的嵌入式经验分享学习)
- rsync 配置详解
- spotify音乐下载_使用Python和R对音乐进行聚类以在Spotify上创建播放列表。
- 【Android 修炼手册】常用技术篇 -- Android 插件化解析