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 ...
随机推荐
- [1-3] 把时间当做朋友(李笑来)Chapter 3 【提高心智,和时间做朋友】 摘录
1. 精确感知时间 我有个朋友叫做时间.她跟我真可算作两小无猜,默默陪了二十多年我才开始真正认识她.她原本没有面孔,却因为我总是用文字为她拍照,而因此可以时常伴我左右.她原本无情,我却可以把她当作朋友 ...
- Asp.Net WebApi服务端解决跨域方案
1.特性方式 主要是继承ActionFilterAttribute,重写OnActionExecuted方法,在action执行后,给响应头加上一个键值对. using System.Web.Http ...
- mongoDB GUI客户端工具大全
网易blog - MongoDB GUI客户端工具大全 oschina - MonjaDB 1.0.2 发布,MongoDB 的 GUI 客户端 oschina创建人红薯对MonjaDB官方文 ...
- js常用工具
1.反编译工具 .NET Reflector 2.js检查工具 ReSharper 8.0.14.856 官方原版+注册机 JScript Editor Extensions JSEn ...
- VS中 无法创建虚拟目录 本地IIS IIS Express 外部主机
从前就有个疑问了,为什么我拉取别人写好的代码后就可以在IIS里面生成一个网站呢? 这里所谓的生成网站,是指包含了所有源代码文件的网站:相对地,发布网站,就是指包含被编译的源文件所得到的DLL文件的网站 ...
- IOS安装CocoaPods完整流程
作为一个底层系统大菜鸟,又搞过几年ios来说,安装一个CocoaPods是一件蛋痛的事~ 说懂又懂,说不懂又不懂. 由于安装过程比較复杂,步骤较多,而网上教程又比較零散,并且有一些是扯蛋的,所 ...
- 保存Hive查询结果的方法
很多时候,我们需要将Hive的查询(select)结果保存起来,方便进一步处理或查看.在Hive里面提供了不同的方式来保存查询结果,在这里做下总结: 一.保存结果到本地 方法1:调用hive标准输出, ...
- 使用scp免passwordserver间传递文件
1.aserver下执行命令 ssh-keygen -t rsa 2.三个回车 3.在用户的文件夹下 ~/.ssh/产生两个文件,id_rsa,id_rsa.pub 4.把aserver下相应的文件 ...
- 文件操作接口的系统调用分析---SYSCALL_DEFINEx
linux/arch/arm/kernel/call.S ... CALL(sys_read) CALL(sys_write) CALL(sys_open) CALL(sys_close) ... ...
- scala 学习(三)——Array和ArrayBuffer
ArrayBuffer:类型化数组 首先需要注意的是Array是定长数组,而ArrayBuffer是可变数组.下面是一个小例子,对数据进行便利和修改的操作.