js vue 监听浏览器历史记录控制手机实体返回键

简单示例：

先上代码，下面代码实现的是监听浏览器历史记录发生变化，替换当前界面的历史路由（站点记录）从而控制页面跳转

//页面生命周期：监听页面加载
onLoad(option) {if (window.history && window.history.pushState) {history.replaceState(null, null, this.$config.host_dev_b + '/h5/#/pages/customer/getUser') //替换当前界面历史站点记录//浏览器界面前进后退记录发生变化的监听事件window.addEventListener('popstate', this.goBack, false)}
},
//生命周期钩子：实例销毁后调用
destroyed() {this.$router.replace({path: '/pages/main/mainForB'})//替换当前浏览器就后，返回时跳转界面设置// 移除监听，否则其他界面会一直执行该监听事件，false阻止默认事件window.removeEventListener('popstate', this.goBack, false)
},
methods:{goBack() {uni.switchTab({url: '/pages/main/mainForB'})//替换当前浏览器就后，返回时跳转界面设置//移除监听，否则其他界面会一直执行该监听事件，false阻止默认事件window.removeEventListener('popstate', this.goBack, false)}
}

看不懂，别着急，慢慢往下看，耐住性子，你会得到你想要的，加油！

uniapp H5开发中会遇到很多关于前进后退的操作，像ios系统实体返回键（手机上的返回按钮）在返回上一层的时候就容易出错，比如我在某个界面定义了微信SDK配置等信息同时已进入界面就调用了地图（外链），然后选择位置带回界面，在重复执行就会造成数据丢失SDK配置错误，这时候在操作实体返回键的时候，将历史记录更改或替换，就不会出现该错误

window.history.back()和window.history.forward()与浏览器的后退前进一样分别表示向后一页和向前一页。

window.history.go(num):

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，

括号内直接填写数字num。正数：前进n个页面，负数：后退n个页面

// 向前移动一条记录，与 router.forward() 相同
router.go(1)// 返回一条记录，与 router.back() 相同
router.go(-1)// 前进 3 条记录
router.go(3)// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

window.location：

location.href或者this.$router.push()、history.pushState()方法跳转，则会向历史记录栈中添加一条数据

history.replaceState()与 history.pushState() 不同的是replaceState() 是修改了当前的历史记录项而不是新建一个，替换了当前的历史记录值

window.history.pushState()：改动站点路径创建新的历史记录

/**
* 参数
* state: histroy.state 这个属性，如果你不做任何标识可以传null
* title: 浏览器标题(现在都不支持，所以都传空字符串''，你可以通过document.title = 'xxxx'去修改)
* url: 当前要修改的url,新的URL可以是任何和当前URL同源的URL     ps: '/xxxx'
* 该方法会让histroy.length 加一
*/
window.history.pushState(state, title, url)

window.history.replaceState()改动站点路径（更新当前的历史路径）不创建新的历史记录

/**
* 参数
*  state: histroy.state 这个属性，如果你不做任何标识可以传null
*  title: 浏览器标题(现在都不支持，所以都传空字符串''，你可以通过document.title = 'xxxx'去修改)
*  url: 当前要修改的url,新的URL可以是任何和当前URL同源的URL。 ps: '/xxxx'
* 该方法不会让histroy.length 加一，直接替换当前的历史栈      
*/
window.history.replaceState(state, title, url)

if (window.history && history.pushState){

// 支持History API

} else {

// 不支持

}

上面代码可以用来检查，当前浏览器是否支持History API。如果不支持的话，可以考虑使用Polyfill库History.js。可以参考文章开头的示例

this.$router.push()

跳转到指定URL，向history栈添加一个新的纪录，点击后退会返回至上一个页面

//编程写法：
//字符串
this.$router.push('/index') 
// 对象
this.$router.push({path:'/index'})
// 带查询参数，变成/backend/order?selected=2/，query传参
this.$router.push({path:'/index', query:{name: '123'} })
// 命名的路由 params传参
this.$router.push({name:'index', params:{name: '123'} })
//声明写法：
< router-link :to = “…” >

this.$router.replace()

方法跳转到指定URL,则不会向历史记录栈中添加数据，点击返回按钮不会回到这个页面

简单举例：A=> B=> C，在B=> C时用了replace，则B被C替换，历史记录的栈就成了这样：A=> C。此时，在C页面点击返回时会跳到A页面。

//编程写法
router.replace(...)
// push方法也可以传replace
this.$router.push({path: '/homo', replace: true})
//声明写法
<reouter-link :to="..." replace></router-link>

PS：this.$route.push({ path: '/home', replace: true })相当于this.$route.replace({ path: '/home' })

好了，以上完毕，实在理解不透彻，就每个都敲代码试下，加油！