vue router路由 push、replace、go的区别

最近在公司写代码的时候遇到路由跳转的回退问题，开个贴记录一下。

1. this.$router.push

使用router.push()方法，这个方法会向history栈添加一个新纪录，成功跳转后点击浏览器的回退按钮会跳回之前的页面。

字符串跳转方法

this.$router.push('需要跳转的路径名称')

对象跳转方法 

this.$router.push({path:"跳转的路径地址"}) // router里定义的path地址

带参数的跳转方法

this.$router.push({
    name:'要跳转的路径名称', // router里定义的name
    query:{ // 要传递的值
    '传递参数的名字': '传递参数的值'
}
})

或者

this.$router.push({
    name:'要跳转的路径名称', // router里定义的name
    params: { // 要传递的值
    '传递参数的名字': '传递参数的值'
}
})

query和params的区别是，query在跳转的时候会把传递的参数在url地址中显示。

2. this.$router.replace

使用router.replace()方法，不会向history栈添加一个新纪录，成功跳转后点击浏览器的回退按钮会到上上个页面  

跳转方法和push一样，只需要把push改为replace

3. this.$router.go(n)

使用router.go()方法，向前或者向后跳转n个页面，n可为正整数或负整数

this.$router.go(n) // this.$router.go(1) 向前前进一个页面

遇到的坑

在setTimeout定时器中，会遇到this指向问题，导致跳转失败

错误代码 ❌❌❌❌❌❌❌❌❌❌❌❌

setTimeout(function () {
        this.$router.go(-1)
      }, 500)

定时器的function中的this会指向window,由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

正确代码✅✅✅✅✅✅✅✅✅✅✅✅

setTimeout(() => () {
        this.$router.go(-1)
      }, 500)

改成箭头函数可以解决问题，成功跳转。