Vue路由跳转方式区别汇总（push，replace，go）

Vue路由跳转方式区别汇总（push，replace，go）

Vue路由提供了多种方式实现页面间的跳转，其中包括路由的跳转、前进、后退等。在进行路由跳转时，我们通常会使用3种方式，包括push、replace和go。

push

push是将目标路由地址添加到路由历史记录中，此时可以通过浏览器的后退按钮回退到上一个页面。同时使用push方式跳转，可以利用params来传递参数。

下面是一个基于Vue Router实现的使用push方式跳转页面的示例代码：

// 跳转到目标路由页面
this.$router.push({
  name: 'targetPageName',
  params: {
    id: 1
  }
});

replace

replace同样可以实现路由的跳转，但它不会像push一样将目标路由地址添加到路由历史记录中。使用replace方式跳转，可以通过浏览器的后退按钮回退到上一个页面，但回退操作将跳过当前页面。replace也可以使用params传参。

下面是一个使用replace方式跳转页面的示例代码：

// 在当前页面替换为目标路由页面
this.$router.replace({
  name: 'targetPageName',
  params: {
    id: 1
  }
});

go

go通过调用浏览器的history.go()方法进行前进或后退操作。与push和replace不同，go方法需要传入一个整数，表示前进或后退的步数。如果传入负整数，则表示后退，正整数则表示前进。

下面是一个使用go方法回退到上一个页面的示例代码：

// 回退到上一个页面
this.$router.go(-1);

以上是基于Vue Router实现的3种路由跳转方式的区别及示例，通过这些示例可以更好地理解它们之间的差异。