VUE中路由变化this.$router(push\replace\go\back)解读

1.this.$router.push()

描述

跳转到指定的url，但这个方法回向history添加一个记录，点击后退会返回到上一个页面。

用法

// 1字符串
this.$router.push('/user/order')
// 2对象
this.$router.push({ path: '/user/order' })
//3传参
this.$router.push({ path: '/user/order', query: {id: 123} })
//3-1取参数
this.$route.query.id
//4命名的路由
this.$router.push({ name: '/user/order', params: {id: 123} })
//4-1取参数
this.$route.params.id

2.this.$router.replace()

描述

同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

用法

同this.$router.push()

3.this.$router.go()

原页面表单中的内容会丢失

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

4.this.$router.back()

原页表表单中的内容会保留

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

总结

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