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();通过按钮绑定方法
在模板中可以直接绑定一个按钮或链接来触发返回操作。
<template>
<button @click="goBack">返回上一页</button>
</template>
<script>
export default {
methods: {
goBack() {
this.$router.go(-1);
}
}
}
</script>检查路由历史是否存在
在某些情况下，可能需要检查路由历史是否存在，避免在历史记录为空时调用 go(-1) 导致意外行为。
if (window.history.length > 1) {
this.$router.go(-1);
} else {
this.$router.push('/'); // 如果历史记录为空，跳转到首页或其他页面
}使用编程式导航
如果需要更灵活的控制，可以通过编程式导航指定返回的路径。
this.$router.push('/previous-page'); // 替换为实际的上一页路径监听浏览器返回事件
如果需要监听浏览器的返回事件并执行特定逻辑，可以使用 beforeRouteLeave 导航守卫。
export default {
beforeRouteLeave(to, from, next) {
// 在这里添加自定义逻辑
next();
}
}注意事项
- 确保项目已经正确配置 Vue Router，否则
this.$router无法使用。 - 在非组件环境中（如 store 或工具函数），可以通过导入路由实例来操作。
import router from '@/router'; // 根据实际路径导入
router.go(-1);以上方法可以根据具体需求选择使用，适用于大多数 Vue 项目中的返回上一页场景。
