H5点击物理返回键,跳转到指定页

695 阅读1分钟

使用h5提供的api 配合popstates事件即可

以vue为例:

mounted() {
    if(window.history && window.history.pushState) {
        // 在页面栈中添加当前地址,并监听返回事件popstate
        window.history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false)
    }
},
destroyed() {
    // 页面销毁时remove掉监听的popstate
    window.removeEvenListener('popstate', this.goBack, false)
},

methods: {
    goBack() {
        // 跳转到首页
        this.$router.replace({name: home})
    }
}

具体history的api还有replacestate, 和pushstate传参相同,不同的是replacestate是修改页面栈中上一个记录,pushstate是添加一个新的记录