vue路由返回触发什么钩子

在Vue的路由中，当通过路由切换页面时，会触发一系列的生命周期钩子函数。而当返回（即退回）到之前的页面时，也会触发相应的钩子函数。

具体来说，当路由返回时，会触发以下钩子函数：

1. beforeRouteLeave：在当前路由即将离开之前触发。我们可以在这个钩子函数中进行一些准备工作，比如数据保存或清理等。

2. beforeRouteUpdate：在当前路由被复用（即参数发生变化时）时触发。这个钩子函数可以用于更新组件的状态或重新请求数据等操作。

3. beforeRouteEnter：在进入目标路由之前触发。需要注意的是，这个钩子函数在路由解析完毕之后、能够获取到组件实例之后才会触发，所以无法直接获取组件实例。如果我们想要在这个钩子函数中访问组件实例，可以使用回调函数或promises的方式。

总而言之，当返回到之前的页面时，会触发beforeRouteLeave、beforeRouteUpdate和beforeRouteEnter这三个生命周期钩子函数。我们可以在这些钩子函数中处理一些需要在路由返回时进行的操作，以实现更灵活的控制和交互效果。

在Vue路由中，返回操作（如点击浏览器的返回按钮或调用浏览器的history.back()方法）会触发以下钩子函数：

1. beforeRouteLeave：
   在离开当前路由之前触发，可以用来拦截返回操作。可以在该钩子函数中执行一些操作，例如弹出确认框，询问用户是否确认离开当前页面。

2. beforeRouteUpdate：
   在当前路由被复用时触发，比如从A页面跳转到B页面，然后再次返回A页面时，会触发该钩子函数。在该钩子函数中可以通过获取新旧的路由对象来执行一些操作，例如重新获取页面数据。

3. afterEach：
   当离开当前页面时触发，无论是返回操作还是跳转到其他路由，都会触发该钩子函数。在该钩子函数中可以执行一些清理操作，例如清除定时器或取消异步请求。

4. beforeResolve：
   在导航被确认之前触发，会在beforeRouteEnter和beforeRouteUpdate之后触发。可以用来执行一些在渲染组件之前必须要完成的操作。

5. scrollBehavior：
   在返回操作时，如果之前页面有滚动位置记录，可以通过scrollBehavior钩子函数来控制返回时滚动到指定位置。可以通过返回一个包含x和y坐标的对象来控制滚动位置。

需要注意的是，以上钩子函数都是在路由配置对象的钩子函数中定义的。在Vue Router中，路由配置对象可以定义在路由组件中，或者通过router.beforeEach全局守卫函数进行定义。根据具体的需求，可以选择在组件级别或全局级别定义这些钩子函数。

当Vue路由返回时，会触发以下的路由导航钩子：

1. beforeRouteEnter：在路由进入前调用，可以在此钩子中获取组件实例this，但是此时组件实例还没有被创建，无法访问组件的data、computed、methods等属性和方法。

2. beforeRouteUpdate：在路由参数更新但是组件被复用时调用，可以在此钩子中获取新的路由参数，并根据参数的变化来更新组件的数据。

3. beforeRouteLeave：在离开路由之前调用，可以在此钩子中进行一些确认操作，例如弹窗确认是否离开。

下面是在Vue路由返回时触发的钩子的详细讲解：

1. beforeRouteEnter

在路由进入前调用，可以在此钩子中获取组件实例this，但是此时组件实例还没有被创建，无法访问组件的data、computed、methods等属性和方法。

beforeRouteEnter(to, from, next) {
  // 在此钩子中获取组件实例this，但无法访问组件的data、computed、methods等属性和方法
  next(vm => {
    // 可以在这个回调函数中访问组件实例vm，例如设置组件实例的属性
    vm.title = 'Home'
  })
}

2. beforeRouteUpdate

在路由参数更新但是组件被复用时调用，可以在此钩子中获取新的路由参数，并根据参数的变化来更新组件的数据。

beforeRouteUpdate(to, from, next) {
  // 在此钩子中可以获取到新的路由参数to，可以根据参数的变化来更新组件的数据
  if (to.params.id !== this.$route.params.id) {
    this.fetchData(to.params.id)
  }
  next()
}

3. beforeRouteLeave

在离开路由之前调用，可以在此钩子中进行一些确认操作，例如弹窗确认是否离开。

beforeRouteLeave(to, from, next) {
  // 在离开路由之前可以进行一些确认操作，例如弹窗确认是否离开
  if (this.isModified()) {
    if (confirm('确定要离开吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
}

以上就是在Vue路由返回时触发的钩子的详细讲解。使用这些钩子可以灵活地对路由变化进行处理，实现更好的用户体验。