当前位置：首页 > VUE

vue 实现页面返回

2026-03-28 07:56:08VUE

监听浏览器返回事件

在Vue中可以通过window.addEventListener监听浏览器的popstate事件，当用户点击浏览器后退按钮时会触发该事件。

mounted() {
  window.addEventListener('popstate', this.handleBackButton)
},
beforeDestroy() {
  window.removeEventListener('popstate', this.handleBackButton)
},
methods: {
  handleBackButton() {
    // 处理返回逻辑
  }
}

使用Vue Router导航

Vue Router提供了编程式导航方法，可以通过router.go(-1)实现返回上一页的功能。

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

使用浏览器历史API

直接调用浏览器原生的historyAPI实现页面返回。

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

路由守卫控制

在Vue Router中使用beforeRouteLeave守卫可以在离开页面前执行特定操作。

beforeRouteLeave(to, from, next) {
  // 执行离开前的逻辑
  next()
}

保持滚动位置

在Vue Router中配置scrollBehavior可以控制页面返回时的滚动位置。

const router = new VueRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

返回按钮组件

创建一个通用的返回按钮组件，方便在多个页面复用。

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

<script>
export default {
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

移动端手势返回

对于移动端应用，可以添加手势返回功能，监听触摸事件实现滑动返回效果。

vue 实现页面返回

data() {
  return {
    startX: 0,
    endX: 0
  }
},
methods: {
  touchStart(e) {
    this.startX = e.changedTouches[0].clientX
  },
  touchEnd(e) {
    this.endX = e.changedTouches[0].clientX
    if (this.startX - this.endX > 100) {
      this.$router.go(-1)
    }
  }
}