当前位置：首页 > VUE

vue实现页面返回

2026-02-20 14:15:08VUE

Vue 实现页面返回的方法

在 Vue 中实现页面返回功能，可以通过以下几种方式实现，具体取决于项目需求和路由配置。

使用 `router.go(-1)`

通过 Vue Router 的 go 方法可以实现返回上一页的功能。go(-1) 表示返回历史记录中的前一个页面，类似于浏览器的后退按钮。

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

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

使用 `router.back()`

back() 方法是 go(-1) 的别名，功能完全相同，语义更清晰。

vue实现页面返回

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

<script>
export default {
  methods: {
    goBack() {
      this.$router.back();
    }
  }
};
</script>

通过编程式导航跳转

如果需要返回指定的路由路径，可以直接使用 push 或 replace 方法跳转。

<template>
  <button @click="goToHome">返回首页</button>
</template>

<script>
export default {
  methods: {
    goToHome() {
      this.$router.push('/');
    }
  }
};
</script>

监听浏览器返回事件

如果需要监听浏览器的返回按钮事件，可以在组件中使用 beforeRouteLeave 导航守卫。

vue实现页面返回

<script>
export default {
  beforeRouteLeave(to, from, next) {
    // 在这里可以添加逻辑，例如确认是否离开
    const answer = confirm('确定要离开吗？');
    if (answer) {
      next();
    } else {
      next(false);
    }
  }
};
</script>

使用 `window.history`

如果未使用 Vue Router，可以直接调用浏览器的 history API 实现返回功能。

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

<script>
export default {
  methods: {
    goBack() {
      window.history.back();
    }
  }
};
</script>

结合条件判断

在某些场景下，可能需要根据条件判断是否允许返回。例如，表单未保存时提示用户。

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

<script>
export default {
  data() {
    return {
      formChanged: false
    };
  },
  methods: {
    checkBeforeBack() {
      if (this.formChanged) {
        if (confirm('表单未保存，确定要返回吗？')) {
          this.$router.go(-1);
        }
      } else {
        this.$router.go(-1);
      }
    }
  }
};
</script>