VUE中路由的几种方式router.replace() router.push() router.go()的区别和使用方法,编程式和申明式

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

一、router.push()

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

声明式：

<router-link :to="path">

编程式：

router.push(path)

二、router.replace()

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

声明式：

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

编程式：

router.replace(path)

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

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

三、router.go()

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