实现vue页面回退

使用 Vue Router 的编程式导航

在 Vue 组件中调用 this.$router.go(-1) 可以实现页面回退。该方法通过操作浏览器历史记录栈实现后退功能，类似于点击浏览器的后退按钮。

methods: {
  goBack() {
    this.$router.go(-1)
  }
}

使用浏览器原生 history API

直接调用 window.history.back() 也能实现页面回退，这种方式不依赖 Vue Router，适用于任何前端项目。

methods: {
  goBack() {
    window.history.back()
  }
}

指定回退路由

如果需要精确控制回退目标，可以使用 this.$router.push() 跳转到指定路由：

methods: {
  goBack() {
    this.$router.push('/home')  // 跳转到首页
  }
}

处理边缘情况

当用户直接从入口页访问时，历史记录栈为空，可以添加回退备选方案：

methods: {
  goBack() {
    if (window.history.length > 1) {
      this.$router.go(-1)
    } else {
      this.$router.push('/')  // 无历史记录时跳转首页
    }
  }
}

添加过渡动画

为页面回退添加过渡效果可以提升用户体验：

<transition name="slide">
  <router-view></router-view>
</transition>

<style>
.slide-leave-active {
  transition: transform 0.3s;
}
.slide-leave-to {
  transform: translateX(-100%);
}
</style>