项目开发的时候,有时候可能需要我们来对页面后退和前进,这个东西跟浏览器自带的前进后退功能很像,下面来大致讲一下在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中浏览器的的前进和后退的更多相关文章

  1. vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

    vue中前进刷新.后退缓存用户浏览数据和浏览位置的实践 2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492   vue中,我们所要实现的一个场景就是: 1.搜索页面==&g ...

  2. vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!

    vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...

  3. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

  4. vue中关于滚动条的那点事

    vue中关于滚动条的那点事 不知道你有没有遇到过这种情况,有时当页面切换时,滚动条不在页面的顶端.最近半路加入一个项目,就遇到这种情况.(若只是为了解决此问题,可直接翻到最下方)下面谈谈解决此问题的过 ...

  5. vue中$router以及$route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...

  6. vue中router以及route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...

  7. HTTP请求中浏览器缓存

    本文导读:浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制.客户端缓存是否需要是可以在服务端代码上控制的.那就是响应头.响应头告诉缓存器不要保留缓存,缓存器就不会缓存相应内容:如果请求信息是需要 ...

  8. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  9. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

随机推荐

  1. C语言-srand种子详解

    rand() 函数取得随机数的时候是通过一个叫做"种子"的变量经过计算得出一个数值, 然后得出的数值再作为新的"种子"参与下一次的运算, 这样就得到了所谓的随机 ...

  2. Centos 7 部署FTP服务简单版

    第三方教程推荐与参考: http://blog.csdn.net/somehow1002/article/details/70232791 先安装成功了,有信心了.再进一步扩展配置. 1.安装vsft ...

  3. 【SSH三大框架】Hibernate基础第九篇:cascade关联关系的级联操作

    这里要说的是Hibernate的关联关系的级联操作,使用cascade属性控制. 依旧用部门和员工举例.多个员工相应一个部门(多对一关联关系) 员工类:Employee.java package cn ...

  4. Atitit.自定义jdbc驱动  支持jsql

    Atitit.自定义jdbc驱动  支持jsql 1. 为什么需要自定义驱动1 1.1. 透明分库分表1 1.2. 自定义数据库的接口.比如大数据文档文件类型的数据库,数据存储引擎2 2. 整个文章分 ...

  5. SDRAM驱动篇之简易SDRAM控制器的verilog代码实现

    在Kevin写的上一篇博文<SDRAM理论篇之基础知识及操作时序>中,已经把SDRAM工作的基本原理和SDRAM初始化.读.写及自动刷新操作的时序讲清楚了,在这一片博文中,Kevin来根据 ...

  6. 88. Merge Sorted Array【easy】

    88. Merge Sorted Array[easy] Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 ...

  7. Android WebView 常见问题

    1.为WebView自定义错误显示界面: /** * 显示自定义错误提示页面,用一个View覆盖在WebView */ protected void showErrorPage() { LinearL ...

  8. 内核交互--procfs

    文档介绍:http://lxr.linux.no/linux+v2.6.37/Documentation/filesystems/proc.txt以下内容抄录linux设备驱动开发详解-宋宝华在/pr ...

  9. Trees in a Wood. UVA 10214 欧拉函数或者容斥定理 给定a,b求 |x|<=a, |y|<=b这个范围内的所有整点不包括原点都种一棵树。求出你站在原点向四周看到的树的数量/总的树的数量的值。

    /** 题目:Trees in a Wood. UVA 10214 链接:https://vjudge.net/problem/UVA-10214 题意:给定a,b求 |x|<=a, |y|&l ...

  10. 你设计的应用是IO依赖型还是CPU依赖型?

    这个话题可能看起来非常枯燥,但它对mysql的性能优化非常重要. 其实我在MYSQL 咨询工作中无时无刻接不在接触这类问题. IO工作负载与cpu依赖全然不同,尤其是当你的工作集(通常仅仅有数据库的一 ...