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，否则没反应~

嗯，就酱~~

转载于:https://www.cnblogs.com/jin-zhe/p/10022237.html

Vue中浏览器的的前进和后退相关推荐

vue中浏览器全屏和退出全屏
1.首先要判断浏览器类型 (是否IE),来控制是否展示功能,在计算属性中判断: computed: {showFullScreenBtn () {return window.navigator.use ...
vue中使用，js禁用浏览器后退按钮
* js禁用浏览器后退按钮 * vue中使用*/ methods:{goBack(){history.pushState(null,null,document.URL);}, } destroyed( ...
vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
从列表页 ------> 详情页, 再从详情页 -----> 列表页 ,要保存上次已经加载的数据和自动还原上次的浏览位置 1. 缓存组件,vue2中提供了keep-alive.首先在我们的 ...
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经 ...
Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
Vue中进行断点调试的两种方式(使用外部浏览器和VsCode的 Debug for Chrome插件)
场景在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点,然后逐步或者逐过程进行调试. 但是在Vue中如果想要进行调试时,如果是在js中调试的话,可以直接添加一个debug ...
vue中控制浏览器滚动
vue中控制浏览器滚动最近的业务中需要用到控制浏览器滚动到对应位置的问题,pc端用到的是vue框架,业务是点击题目题号,定位到相对应的题目(相信业务中会经常遇到哈),首先想到的肯定就是js老大哥了, ...
vue中axios利用blob实现文件浏览器下载
背景在vue中,使用axios向后台请求数据,但只接收返回的response并不能实现浏览器下载,所以需要借助于blob实现文件的浏览器下载,分为两种情况,一种是get请求,使用params,另一种 ...
vue中关闭浏览器清除localStorage,并且刷新时保持状态不受影响
在App.vue中 mounted() {window.onload = function () {console.log(window.sessionStorage["ISlogin&qu ...

Vue中浏览器的的前进和后退

Vue中浏览器的的前进和后退相关推荐

最新文章

热门文章