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’});替换路由,没有历史记录,点击返回,会跳转到上上一个页面

你可能感兴趣的:(vue,vue)