vue实现后退

Vue 实现后退功能的方法

在 Vue 项目中，可以通过以下几种方式实现后退功能：

使用 router.go() 方法

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

使用 router.back() 方法

methods: {
  goBack() {
    this.$router.back()
  }
}

在模板中直接调用

<button @click="$router.go(-1)">返回</button>

使用浏览器原生的 history API

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

注意事项

• router.go(-1) 和 router.back() 效果相同，都是返回上一页
• 如果历史记录中没有上一页，这些方法将不会有任何效果
• 在 Vue 项目中，推荐使用 Vue Router 提供的方法而非原生 API

完整组件示例

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

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