讲解一下VUE中路由的几种方式:router.replace() router.push() router.go()的区别和使用方法,以及编程式和申明式的书写方法。

一、router.push()

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈中添加一条新的记录。所以,当用户点击浏览器后退按钮时,则回到之前的URL页面。

声明式:

1
<router-link :to="path">

编程式:

1
router.push(path)

二、router.replace()

和router.push()的主要区别在于,它不会向 history 添加新记录,而是跟它的方法名一样replace一样,替换掉当前的history记录。于是导航后不会留下前一个路由页面的 history 记录。即使点击返回后退按钮,也不可能退回到跳转之前的那个页面。

声明式:

1
<router-link :to="path" replace>

编程式:

1
router.replace(path)

通过给push方式添加replace:true参数,也可以实现:

1
this.$router.push({path: '/home', replace: true})

三、router.go()

这个方法的参数是一个整数,意思是在 history 记录栈中向前或者后退多少步,类似window.history.go(n)。也就是我们平时用浏览器上面的“上一页”和“下一页”功能的实现。