1、app的根组件定义mounted函数:
mounted() {
// 监听浏览器的返回按钮
if (window.history && window.history.pushState) {
history.pushState(null, null, document.URL);
window.addEventListener("popstate", this.onCloseModal, false);
}
}
2、app根组件定义destroyed函数:
// 组件销毁阶段,解除监听返回按钮的事件
destroyed() {
window.removeEventListener("popstate", this.onCloseModal, false);
},
3、app根组件的methods中定义,处理函数
methods: {
// 监听返回按钮的处理函数
onCloseModal() {
// 获取当前页面的url地址
const roster_url = window.location.href
// 判断当前是哪一个页面,是否是花名册的个人详细页面,因为只有在花名册的个人详细页面才触发跳转
const flag = roster_url.indexOf('roster_userinfo')
//如果是花名册的个人详细页面,点击后退按钮,后退到花名册主页
if( flag >= 0){
this.$router.push('/indexToRoster')
}
},
},
如果定义到app根组件,如果不做区分,那么每一个页面点击后退按钮,都会触发onCloseModal这个处理函数,我的需求是,只是在“个人信息”的页面触发,直接定义到个人页面也可以,但是这次项目个人信息页面有5个,为了简化代码,这个方法,就定义在了app根组件,但是在触发的时候,做一个判断,判断此时在那一个人页面,如果在个人信息页面,才会触发这个方法。这样就解决了。