vue router路由跳转方法是什么

Vue Router是Vue.js官方提供的一种路由管理器，它可以在Vue.js单页面应用中实现页面之间的跳转与导航。在使用Vue Router进行路由跳转时，有多种方法可供选择。

1. 使用router-link组件

在Vue Router中，可以使用router-link组件进行页面跳转。该组件是Vue Router提供的一个内置组件，通过在template中使用<router-link>标签来创建一个可点击的链接，点击该链接时会自动触发路由跳转。

首页
关于我们

上述代码中，to属性指定了目标页面的路径，当用户点击相应的链接时，就会跳转到指定的页面。

2. 使用router.push方法

除了使用router-link组件外，还可以通过调用router.push()方法来实现路由跳转。这个方法可以在Vue组件的methods中或者Vue实例中使用，接收一个路径参数，并在路由中将用户导航到指定的路径。

// 在Vue实例或者Vue组件中
this.$router.push('/home');

上述代码中，this.$router指向当前Vue实例的路由对象，通过调用push方法并传入目标路径，就可以实现页面跳转。

3. 使用router.replace方法

为了避免在浏览器历史记录中生成多余的记录，可以使用router.replace()方法进行路由跳转。与router.push()方法相比，router.replace()方法在跳转时不会生成新的历史记录，而是直接替换当前的历史记录。

// 在Vue实例或者Vue组件中
this.$router.replace('/home');

上述代码中，this.$router指向当前Vue实例的路由对象，通过调用replace方法并传入目标路径，就可以实现页面跳转。

4. 使用router.go方法

如果需要在路由历史记录中向前或向后导航多个步骤，可以使用router.go()方法。该方法接收一个整数作为参数，表示历史记录中要前进或后退的步数。

// 在Vue实例或者Vue组件中，前进一步
this.$router.go(1);

// 在Vue实例或者Vue组件中，返回上一页
this.$router.go(-1);

上述代码中，this.$router指向当前Vue实例的路由对象，通过调用go方法并传入正整数或负整数，就可以实现前进或返回的导航。

总结一下，Vue Router提供了多种方法来实现页面之间的跳转。我们可以使用router-link组件来创建可点击的链接，也可以通过router.push()、router.replace()和router.go()等方法来实现编程式的路由跳转。根据不同的需求，选择适合的方式进行使用。无论是通过点击链接还是编程式导航，Vue Router都能提供强大的路由管理功能，让用户在Vue.js应用中实现灵活的页面导航。