回退到首页，返回浏览器窗口历史第一页 js

weixin_43869439

已于 2022-06-22 11:14:48 修改

阅读量1.7k

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-06-13 18:43:36 首次发布

本文链接：https://blog.csdn.net/weixin_43869439/article/details/125265274

版权

本文探讨了在开发中如何通过调整`closePage`方法和使用防抖函数`_debounce`解决关闭按钮导致的`window.history.length`不准确问题，重点介绍了回退和刷新页面的方法，并提供了一种有效处理连续点击问题的解决方案。

摘要由CSDN通过智能技术生成

开发需求点击关闭实现回到首页的功能？？？

开发示例

methods: {
	closePage() {
    	const historyLength = window.history.length;
    	window.history.go(-(historyLength - 1));
    },
}


// 返回上一页
history.go(-1) // 返回上一页 || 返回上两个页面 .go(-2)
window.history.forward() // 返回下一页
window.history.go(num)  // num 可以为正数 也可以为负数

window.location.go(-1) //刷新上一页
window.history.back() // 强行刷新

// 刷新本页面
window.location.reload() //刷新当前页

查阅网站

补充以上是开发过程中写法，但是遇到bug 点击上图左侧返回 history.length中也会添加history导致length记录不准确

methods: {
	// 上图右上角的关闭 返回首页功能
    closePage() {
      const historyLength = window.historylen || window.history.length;
      window.history.go(parseInt(-(historyLength - 1)));
    },
    // 左上角的返回功能
    back() {
      // 定义全局变量 historylen 记录length
      window.historylen = window.historylen || window.history.length;
      window.historylen--;
      window.history.back();
    },
  },
  computed: {
  	// 上图右侧关闭事件绑定 @click="handleDebounce"
    handleDebounce() {
      // debounce 防抖函数
      return _.debounce(this.closePage, 1000);
    },
  },