vue 路由返回处理

case1: 在路由跳转之前做监听处理

// 回退事件监听，可以在路由Router.beforeEach/beforeRouteLeave 里面加条件做判断处理

created () {
// 添加页面返回监听
 window.addEventListener('popstate', this.goBack, false)
},
destroyed () {
 // 移除监听事件
  window.removeEventListener('popstate', this.goBack, false)
},
beforeRouteLeave (to, from, next) {
  this.$destroy() // 保证触发destroy事件
  next()
}

// 有时候发现返回监听事件没有生效，为啥？打印输出一看，destroyed() 在 goBack()之前执行了，所以还得在destroyed()里面做适当的延时处理

case2: 控制路由历史记录的返回

this.$router.replace({
   path: '/content',
   query: {
     searchVal: val
   }
 })
this.$router.go(-1) // 处理返回需要点两次的问题

// 如果进入路由层级>1, 可以在router.beforeEach中记录要监控的路由层级，然后进行返回处理
// 我的需求为，要选择多级部门下面的人，然后返回（仿照企业微信的选人页面）
router监听:
let saveTaskSelectEnter  = 0
router.beforeEach(to, from, next) {
  if (to.name == 'departments') {
     // 记录进入部门路由层数
     saveTaskSelectEnter ++
     console.log('saveTaskSelectEnter---', saveTaskSelectEnter)
     UseLocalStorage.setItem('saveTaskSelectEnter', saveTaskSelectEnter) // 把它存在localStorage
  }
}

控制返回的函数：
beSureSel () {
  const taskSelectEnter =  UseLocalStorage.getItem('saveTaskSelectEnter') || 0
  this.$router.replace({name:'taskAdd', params: {
    userDepartment: this.choosedUser,
    departmentList: this.choosedDepart
  }})
  this.$router.go(0 - taskSelectEnter - 1)
}

$router.push 和 $router.replace 的区别：

• $router.push({path:‘home’});本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录
• $router.replace({path:‘home’});替换路由，没有历史记录，点击返回，会跳转到上上一个页面