vue返回上一页(后退)的几种方法与区别说明
作者: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模式下就不会跳回浏览器上一页
其中,在开发阶段,方式一用的是最多的,但是需要注意一点,就是其真的是返回到上一页,所以有时候达不到我们想要的效果,这时候就可以借助方式三的编程式导航来解决,无论上一页是什么,点击返回按钮都只会跳转到指定的路由。不过最好在路由信息好久不变的情况下使用。省的改来改去的。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。