vue实现返回上页

使用 router.go(-1) 方法

在 Vue 中，可以通过 Vue Router 的 go 方法实现返回上一页。router.go(-1) 表示后退一页，类似于浏览器的后退按钮。

// 在组件方法中调用
this.$router.go(-1)

使用 router.back() 方法

Vue Router 还提供了 back 方法，与 go(-1) 效果相同，但语义更清晰。

// 在组件方法中调用
this.$router.back()

通过编程式导航跳转

如果需要更灵活的控制，可以通过编程式导航指定返回的路径。

// 返回到指定路径
this.$router.push('/previous-page')

监听浏览器返回事件

如果需要监听返回事件并执行特定逻辑，可以在组件中添加 beforeRouteLeave 守卫。

beforeRouteLeave(to, from, next) {
  // 执行自定义逻辑
  console.log('即将离开当前页面')
  next()
}

使用 <router-link> 标签

在模板中可以直接使用 <router-link> 标签实现返回功能。

<router-link to="/previous-page">返回上一页</router-link>

结合浏览器历史记录

如果需要更复杂的历史记录操作，可以结合 window.history API。

// 直接调用浏览器历史记录
window.history.back()

注意事项

• 确保项目已正确配置 Vue Router。
• 在调用路由方法前检查路由实例是否存在。
• 如果路由历史记录为空，go(-1) 或 back() 可能无效。