vue项目获取浏览器对象“后退”，并监听，触发函数

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根组件，但是在触发的时候，做一个判断，判断此时在那一个人页面，如果在个人信息页面，才会触发这个方法。这样就解决了。