Vue Router返回上一页

在使用Vue.js开发Web应用程序时，Vue Router是一个非常重要的工具。它允许我们在应用程序中进行页面之间的导航和跳转，并且提供了一些方便的功能，如路由参数、嵌套路由等。

在我们的应用程序中，有时用户可能需要返回到前一个页面。Vue Router提供了一种简单的方法，使我们可以轻松地实现这个功能。

使用router.go()方法

Vue Router提供了一个router.go()方法，它可以在路由历史记录中向前或向后移动。通过指定一个整数作为参数，我们可以向后返回指定数量的步骤。

下面是一个示例，展示了如何使用router.go()方法返回上一页：

// 在某个Vue组件中
methods: {
  goBack() {
    this.$router.go(-1)
  }
}

在这个示例中，goBack()方法被绑定到一个按钮或链接的点击事件上。当用户点击这个按钮或链接时，router.go(-1)将会被调用，从而返回到上一页。

通过$router.history.goBack()方法返回上一页

除了使用router.go()方法之外，还可以使用$router.history.go(-1)方法来实现相同的效果。

下面是一个示例，展示了如何使用$router.history.goBack()方法返回上一页：

// 在某个Vue组件中
methods: {
  goBack() {
    this.$router.history.goBack()
  }
}

与之前的示例相比，这里唯一的区别就是使用了$router.history.goBack()方法代替了router.go(-1)。

编程式导航返回上一页

除了上述基于历史记录的方法之外，我们还可以使用编程式导航的方式返回上一页。这可以通过在代码中调用this.$router.push()方法来实现。

下面是一个示例，展示了如何使用编程式导航返回上一页：

// 在某个Vue组件中
methods: {
  goBack() {
    this.router.push(this.router.history.current.fullPath)
  }
}

在这个示例中，goBack()方法通过调用this.$router.push()方法传入当前页面的完整路径来返回上一页。

示例代码运行结果

下面是一个完整的示例代码，演示了如何使用Vue Router返回上一页：

<template>
  <div>
    <h1>当前页面：{{ currentPath }}</h1>
    <button @click="goBack">返回上一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPath: ''
    }
  },
  mounted() {
    this.currentPath = this.router.history.current.fullPath
  },
  methods: {
    goBack() {
      this.router.go(-1)
    }
  }
}
</script>

在这个示例中，我们创建了一个简单的Vue组件，显示了当前页面的路径，并提供了一个按钮来返回上一页。当用户点击按钮时，将会执行goBack()方法，并通过this.$router.go(-1)返回上一页。初始化时，当前页面的路径将会被保存在currentPath变量中，并显示在页面上。