Vue中浏览器的的前进和后退
项目开发的时候,有时候可能需要我们来对页面后退和前进,这个东西跟浏览器自带的前进后退功能很像,下面来大致讲一下在vue中浏览器的前进和后退
一、后退功能
vue中的后退有好多种方法可以使用,使用这些方法前要确认有之前的页面,否则后退就到了一个空页面!
可以通过history.length来获取历史记录的长度
console.log(history.length)
1.window.history对象中保存有页面访问的历史记录,在编写时可不使用 window 这个前缀。 加载历史列表中的前一个URL,这与在浏览器中点击前进按钮是相同的
window.history.back(); 后退1步
history.back(); 后退1步
2.this.$router.go(-1); 通过vue的路由来进行后退1步
this.$router.go(-2); 后退2步
this.$router.back(); 后退1步
二、前进功能
可以通过history.forward(); 来加载历史列表中的下一个URL,这与在浏览器中点击前进按钮是相同的,使用前需要确认有下一个URL,否则没反应~
嗯,就酱~~
Vue中浏览器的的前进和后退的更多相关文章
- vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492 vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...
- vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!
vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
- vue中关于滚动条的那点事
vue中关于滚动条的那点事 不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端.最近半路加入一个项目,就遇到这种情况.(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过 ...
- vue中$router以及$route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...
- vue中router以及route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...
- HTTP请求中浏览器缓存
本文导读:浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制.客户端缓存是否需要是可以在服务端代码上控制的.那就是响应头.响应头告诉缓存器不要保留缓存,缓存器就不会缓存相应内容:如果请求信息是需要 ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
随机推荐
- android:ellipsize实现跑马灯效果总结
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说都是 ...
- SQL Server事务详解
事务定义: 事务是单个的工作单元.如果某一事务成功,则在该事务中进行的所有数据更改均会提交,成为数据库中的永久组成部分.如果事务遇到错误且必须取消或回滚,则所有数据更改均被清除. 事务三种运行模式: ...
- Win 7+Anaconda+tensorflow
Anaconda是一种拥有各种Python库的集成环境,也支持Windows.Mac和Linux系统. 1.安装 Anaconda 安装包:https://www.continuum.io/downl ...
- Redis之最大内存置换策略
0.前言 Redis默认最大内存大小是应用程序可访问的内存大小, 32位windows下是2GB, linux下是3GB. 64位下可以访问的内存为2^64字节, Redis提供了maxmemory字 ...
- Atitit.uml2 api 的编程代码实现设计uml开发 使用eclipse jar java 版本
Atitit.uml2 api 的编程代码实现设计uml开发 使用eclipse jar java 版本 1. clipse提供了UML的底层Java包, 1 2. MDTUML2Getting St ...
- Qt 推断一个IP地址是否有效
QHostAddress test; if (!test.setAddress("111.111.111.1")) { ui->statusBar->showMessa ...
- linux 命令之 ping
ping命令主要用于检測主机的连通性. 语法: ping [-dfnqrRv] [-c <完毕次数>] [-i <间隔秒数>] [-I <网络接口>] [-l &l ...
- Vsphere笔记07 Vcenter 部署流程 2
7.Vcenter 部署流程 2 Vcenter 安装需求 1.硬件要求 CPU:支持VT-X技术并开启内存:4G或4G 以上 2.系统要求 Windows 2008 R2 x64 Vsp ...
- 通过Get方式传递数据
1:因为get传参数有个特点就是不能超过256字节.如果数据大的话会溢出. 解决办法: $data=json_encode($data_array); 然后在拼接超链接: <a href=&qu ...
- point-position2修改版
说明: 在共面直线测试中,由于计算误差等原因,共面条件判断不准,但计算结果依然正确. // point-position2.cpp : 定义控制台应用程序的入口点. #include "st ...