vue实现后退按钮

实现后退按钮的几种方法

在Vue中实现后退按钮功能可以通过以下几种方式：

使用浏览器历史API

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

在模板中添加按钮：

<button @click="goBack">返回</button>

使用Vue Router的导航方法

import { useRouter } from 'vue-router';

// 在setup中使用
const router = useRouter();
const goBack = () => {
  router.go(-1);
};

条件后退逻辑

methods: {
  goBack() {
    if (window.history.length > 1) {
      this.$router.go(-1);
    } else {
      this.$router.push('/');
    }
  }
}

使用导航守卫控制

router.beforeEach((to, from, next) => {
  if (from.path === '/current-page' && to.path === '/previous-page') {
    // 执行特定后退逻辑
  }
  next();
});

带状态的后退

methods: {
  goBack() {
    this.$router.push({
      path: '/previous-page',
      query: { from: 'current-page' }
    });
  }
}

移动端手势后退

mounted() {
  document.addEventListener('touchstart', this.handleTouchStart);
  document.addEventListener('touchend', this.handleTouchEnd);
},
methods: {
  handleTouchStart(e) {
    this.startX = e.touches[0].clientX;
  },
  handleTouchEnd(e) {
    const endX = e.changedTouches[0].clientX;
    if (this.startX - endX > 50) {  // 左滑手势
      this.goBack();
    }
  }
}

选择哪种方法取决于具体需求。简单场景使用history.back()或router.go(-1)即可，复杂场景可能需要结合路由守卫和状态管理。