关于this.$router.push、replace、go的用法和区别

466 阅读1分钟

1.this.$router.push()

描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。

用法:

// 字符串
router.push('home')

//对象
router.push({path: 'home'})
router.push({name: 'home'})

//命名的路由
router.push( {name: 'user'}, params:{ userID:123} )

//带查询参数,变成 /register?plan=private
router.push( {path: 'register', query:{ plan= 'private' }} )

2.this.$router.replace()

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

3.this.$router.go(n)

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面。

//在浏览器记录中前进—步,等同于history .forward()
router.go(1)

//后退—步记录,等同于history.back()
router.go(-1)

//前进 3 步记录
router.go(3)

//如果 history 记录不够用,那就会跳转失败
router.go(-100)
router.go(100)