vue返回上一页(后退)的几种方法与区别说明

更新时间：2023年10月07日 10:04:16 作者：LangForOne

这篇文章主要介绍了vue返回上一页(后退)的几种方法与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue返回上一页(后退)的几种方法与区别

案例

从a页面=>b页面=>c页面，当前在c页面，执行某方法后可以如同按了浏览器后退键一样返回b页面

方法

①. 若项目使用vue-router，this.$router.go(-1)可以回到上一页

②. this.$router.back()

③. window.history.go(-1)

区别

①与②的区别是：

go(-1): 原页面表单中的内容会丢失：

this.$router.go(-1)：后退+刷新；
this.$router.go(0)：刷新；
this.$router.go(1)：前进；

back(): 原页表表单中的内容会保留：

this.$router.back()：后退；
this.$router.back(0)：刷新；
this.$router.back(1)：前进；

③的区别是：

history.go(-1)是返回浏览器的上一页，而由于Vue是单页面应用，有的浏览器对于hash变更不认为是两个不同的页面，在hash模式下就不会跳回浏览器上一页

vue的vue-router中返回上一页方式

方式1

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步

//原页面表单中的内容会丢失：
this.$router.go()
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

方式2

this.$router.back()
back(): 原页面表单中的内容会保留；
 1. this.$router.back(-1)：后退；
 2. this.$router.back(0)：刷新；
 3. this.$router.back(1)：前进；

方式3

编程式导航，点击后返回指定页面，指明返回的页面路径。可以是任意路径

 this.$router.push("/company");

方式4

window.history.go(-1)

history.go(-1)是返回浏览器的上一页，而由于Vue是单页面应用，有的浏览器对于hash变更不认为是两个不同的页面，在hash模式下就不会跳回浏览器上一页

其中，在开发阶段，方式一用的是最多的，但是需要注意一点，就是其真的是返回到上一页，所以有时候达不到我们想要的效果，这时候就可以借助方式三的编程式导航来解决，无论上一页是什么，点击返回按钮都只会跳转到指定的路由。不过最好在路由信息好久不变的情况下使用。省的改来改去的。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ts+vue3.0声明响应式对象的实现方式
这篇文章主要介绍了ts+vue3.0声明响应式对象的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-06-06
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
今天小编就为大家分享一篇解决vue-router在同一个路由下切换,取不到变化的路由参数问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue项目WebPack打包删除注释和console
这篇文章主要介绍了Vue项目WebPack打包删除注释和console，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue实现双向滑动输入条
这篇文章主要为大家详细介绍了Vue实现双向滑动输入条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vite搭建vue2项目的实战过程
自从体验了一下vite之后,真的太快了,然而对vue3还不是很熟练,就想着在vue2的项目中使用以下vite,下面这篇文章主要给大家介绍了关于vite搭建vue2项目的相关资料,需要的朋友可以参考下
2022-11-11
解决vite打包后白屏之router-view不生效问题
这篇文章主要介绍了解决vite打包后白屏之router-view不生效问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
Vue.js更改调试地址端口号的实例
今天小编就为大家分享一篇Vue.js更改调试地址端口号的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue2.x数组劫持原理的实现
这篇文章主要介绍了vue2.x数组劫持原理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue项目引入antDesignUI组件实现
本文介绍了如何以Vue引入antDesignUI,主要包括下载安装、配置和引入组件等步骤,通过本文,读者可以快速了解antDesignUI在Vue中的应用,感兴趣的可以了解一下
2023-08-08
vue 动态创建组件的两种方法
这篇文章主要介绍了vue 动态创建组件的两种方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12