实现vue页面回退

监听浏览器返回事件

在Vue组件中使用beforeRouteLeave导航守卫，可以监听路由变化。该方法在离开当前路由前触发，适用于需要确认或保存数据的场景。

beforeRouteLeave(to, from, next) {
  if (需要确认的条件) {
    const answer = confirm('确定离开当前页面？未保存的数据将丢失');
    answer ? next() : next(false);
  } else {
    next();
  }
}

编程式导航

通过this.$router.go(-1)返回上一页，或this.$router.push('/target-path')跳转指定路由。适合在按钮点击事件中触发。

methods: {
  goBack() {
    this.$router.go(-1); // 返回历史记录中的上一页
  },
  navigateToHome() {
    this.$router.push('/home'); // 跳转至首页
  }
}

使用window.history

直接调用浏览器原生API实现回退，适用于非Vue Router环境或需要更底层控制的情况。

methods: {
  handleBack() {
    window.history.back(); // 等同于点击浏览器后退按钮
  }
}

动态路由监听

结合watch监听$route对象的变化，可在路由变化时执行特定逻辑（如清理定时器）。

watch: {
  '$route'(to, from) {
    if (from.path === '/source-page') {
      // 执行离开源页面时的操作
    }
  }
}

缓存页面状态

使用keep-alive包裹路由视图组件，保留组件状态避免重复渲染。需在路由配置中设置meta: { keepAlive: true }。

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

注意事项

• 使用beforeRouteLeave时需确保组件是路由组件（即通过router-view渲染）。
• 编程式导航可能受路由模式（hash/history）影响，需确保服务器配置支持history模式。
• window.history直接操作可能绕过Vue Router的守卫逻辑，需谨慎使用。