Vue Router 编程式导航

在 Vue.js 应用程序中，Vue Router 提供了多种导航方式来控制应用的状态转换。除了使用 <router-link> 组件来创建链接外，Vue Router 还支持通过编程的方式来进行页面导航。这种方式特别适用于需要在组件内部或事件处理函数中动态地进行导航的场景。本文将详细介绍如何在 Vue Router 中使用编程式导航，并通过多个示例来展示其实现方法。

基本概念与作用

编程式导航

编程式导航指的是通过调用 Vue Router 提供的方法来手动控制导航的行为，而不是通过点击 <router-link> 标签来触发。这种方式可以让我们在业务逻辑中更加灵活地控制路由的变化。

Vue Router 提供的方法

Vue Router 提供了几个用于编程式导航的方法：

• router.push(location)：导航到下一个位置。
• router.replace(location)：导航到下一个位置，但不会在历史记录中留下记录。
• router.go(n)：在历史记录中前进或后退 n 个位置。

示例一：基本的编程式导航

在 Vue 组件内部，我们可以通过 this.$router.push 方法来实现编程式导航。

<template>
  <button @click="navigateToHome">Go to Home</button>
</template>

<script>
export default {
   
   
  methods: {
   
   
    navigateToHome() {
   
   
      this.$router.push({
   
    name: 'Home' });
    }
  }
};
</script>

在这个例子中，我们定义了一个按钮，点击该按钮时将导航到名为 Home 的路由。

示例二：带参数的编程式导航

当需要导航到带有参数的路由时，可以使用对象形式来传递参数。

<template>
  <button @click="navigateToUserPage">Go to User Page</button>
</template>

<script>
export default {
   
   
  methods: {
   
   
    navigateToUserPage() {
   
   
      this.$router.push({
   
    name: 'User', params: