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

　　目录

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

　　案例

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

　　方法

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

　　②. this.$router.back()

　　③. window.history.go(-1)

　　区别

　　①与②的区别是：

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

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

　　③的区别是：

　　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模式下就不会跳回浏览器上一页

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

　　总结

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

　　您可能感兴趣的文章: