Vue3实现页面返回的三种核心方法详解

vue

   @click="goBack">返回


 setup>
const goBack = () => {
  window.history.back()
}

JavaScript
window.history.go(-1)

用户直接打开：
https://example.com/detail/100

点击返回：
window.history.back()

JavaScript
const goBack = () => {
  if (window.history.length > 1) {
    window.history.back()
  } else {
    window.location.href = '/'
  }
}

vue
 setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.back()
}

vue

   class="detail-page">
    
商品详情
     @click="goBack">
      返回列表
    
  



 setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function goBack() {
  router.back()
}

在Vue3项目中，这种方式具有以下优势：

1. 与Vue Router路由体系保持一致

如果项目使用Hash模式或History模式，Vue Router会自动处理相关逻辑。

2. 支持路由守卫

如果配置了：

JavaScript
router.beforeEach((to, from, next) => {
  next()
})

通过router.back()返回时，也能够参与路由流程。

3. 代码语义更加明确

相比：

JavaScript
window.history.back()

使用：

JavaScript
router.back()

可以清楚表达这是一次路由返回操作。

除了router.back()，还可以使用：

JavaScript
router.go(-1)

例如：

JavaScript
const goBackTwoPage = () => {
  router.go(-2)
}

适合需要跨越多个页面返回的场景。

方法三：通过路由跳转实现指定页面返回

实际业务开发中，并不是所有返回操作都是返回上一个历史页面。

例如：

用户流程：

首页
 ↓
商品列表
 ↓
商品详情
 ↓
登录页面

登录成功后，如果直接执行：

JavaScript
router.back()

可能返回商品详情页，而业务期望返回商品列表页。

这时候需要使用明确的路由跳转方式。

示例：

vue
 setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.push('/product/list')
}

或者使用路由名称：

JavaScript
router.push({
  name: 'ProductList'
})

这种方式不会依赖浏览器历史，而是直接跳转到目标页面。

适用于：

• 登录完成返回

• 表单提交后返回

• 权限页面退出

• 多入口页面跳转

例如：

JavaScript
const submitForm = async () => {

  await saveData()

  router.push({
    name: 'UserList'
  })

}

提交成功后直接进入用户列表，而不是返回上一个页面。

Vue3中封装通用返回函数

在大型项目中，页面返回逻辑通常会进行统一封装。

例如创建工具函数：

JavaScript
import router from '@/router'

export function goBack(defaultPath = '/') {

  if (window.history.length > 1) {
    router.back()
  } else {
    router.push(defaultPath)
  }

}

页面中调用：

JavaScript
import { goBack } from '@/utils/router'

const handleBack = () => {
  goBack('/home')
}

这样可以统一处理：

• 有历史记录正常返回

• 无历史记录跳转默认页面

• 多页面共享返回逻辑

对于后台管理系统、移动端H5应用尤其适用。

Vue3页面返回时需要注意的问题

1. 避免无限返回循环

部分项目会监听路由变化：

JavaScript
watch(
  () => route.path,
  () => {
    router.back()
  }
)

这种写法容易造成返回循环。

页面返回应该由用户行为触发，而不是在路由监听中自动执行。

2. 注意keep-alive缓存页面状态

Vue3中使用：

vue

   />

返回页面时可能保留之前的数据。

如果希望返回时刷新数据，需要监听：

JavaScript
onActivated(() => {
  loadData()
})

而不是只使用：

JavaScript
onMounted()

因为缓存页面不会重新执行挂载生命周期。

3. 移动端需要处理返回手势

在移动端H5应用中，用户可能通过系统返回键返回页面。

可以监听：

JavaScript
window.addEventListener(
  'popstate',
  () => {
    console.log('页面返回')
  }
)

结合Vue Router可以实现更复杂的返回控制。

三种Vue3返回方式对比

实际开发中的选择建议

如果只是普通详情页返回列表页，可以优先使用：

JavaScript
router.back()

这是Vue3项目中最常见的实现方式。

如果返回目标固定，例如：

• 保存成功返回首页

• 登录成功返回用户中心

• 提交订单返回订单列表

建议使用：

JavaScript
router.push()

明确指定目标页面。

如果项目没有使用Vue Router，只是普通Vue页面，则可以选择：

JavaScript
window.history.back()

总结

Vue3实现页面返回主要有三种方式：

第一种是使用window.history.back()调用浏览器历史记录，适合简单返回需求；第二种是使用Vue Router提供的router.back()，更加符合Vue3项目开发规范，也是实际开发中最推荐的方法；第三种是通过router.push()跳转到指定页面，适用于复杂业务流程控制。

在实际项目中，需要根据页面结构、用户操作路径以及业务需求选择合适方案。合理设计返回逻辑，可以有效提升应用交互体验，同时减少路由管理中的各种问题。