实现原理:

通过history.pushState来将页面路径加入历史记录中,在点击返回键的时候会触发popstate事件,所以给popstate绑定一个返回方法就好了。

实现代码:

在App.vue中添加以下代码:

mounted() {
	//挂载成功后给pop事件绑定一个方法
	// 如果支持 popstate (一般移动端都支持)
	if (window.history && window.history.pushState) {
		// 往历史记录里面添加一条新的当前页面的url
		history.pushState(null, null, document.URL);
		// 给 popstate 绑定一个方法用来监听页面返回
		window.addEventListener('popstate', this.back, false); //false阻止默认事件
	}
},

//组件销毁后清除事件
destroyed() {
	window.removeEventListener('popstate', this.back, false); //false阻止默认事件
},

methods: {
	back() {
		console.log("监听到了");
		this.$router.push({
			name: index
		})
	}
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐