Vue路由返回上一页

1. 介绍

在开发Vue.js应用程序时，路由是一个非常重要的功能。路由允许我们在不刷新整个页面的情况下导航到不同的页面。在某些情况下，我们可能需要在页面间进行导航，并返回到上一页。本文将详细介绍在Vue路由中如何返回上一页。

2. 安装和设置

在开始讨论如何返回上一页之前，我们需要确保我们的Vue项目已经正确设置了路由。如果还没有安装Vue Router，可以使用下面的命令进行安装：

npm install vue-router

安装成功后，在main.js文件中添加如下代码来设置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import HomePage from './components/HomePage.vue'
import AboutPage from './components/AboutPage.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

在上面的代码中，我们选择在Vue应用程序的根组件(App.vue)中渲染路由，以便在整个应用程序中引用路由。

3. 导航到新页面

在Vue中，我们可以使用<router-link>组件来导航到新页面。<router-link>组件是Vue Router提供的一个内置组件，用于创建导航链接。

打开HomePage.vue组件，并添加以下代码：

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

在上面的代码中，我们使用<router-link>组件将文本”Go to About Page”包装起来，并将to属性设置为"/about"，这样当用户点击链接时，将导航到关于页面。

4. 在路由中返回上一页

现在，我们已经学会了如何导航到新的页面，接下来我们将学习如何在Vue路由中返回到上一页。

在Vue Router中，我们可以使用$router对象提供的go()方法来返回到上一页。$router.go()方法接收一个整数参数，正数代表前进，负数代表后退。

在AboutPage.vue组件中，添加以下代码：

<template>
  <div>
    <h1>About Page</h1>
    <button @click="goBack">Go Back</button>
  </div>
</template>

<script>
export default {
  name: 'AboutPage',
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

在上面的代码中，我们添加了一个按钮，当用户点击按钮时，会触发goBack()方法。goBack()方法通过调用this.$router.go(-1)来返回上一页。

5. 添加返回按钮

除了在页面上添加一个按钮来返回上一页，我们还可以在Vue路由中使用导航守卫来添加一个返回按钮。在每个页面的导航栏中显示返回按钮，并使用导航守卫中的beforeRouteLeave方法来处理返回操作。

在App.vue文件中，添加以下代码：

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  beforeRouteLeave(to, from, next) {
    window.history.pushState(null, null, from.path)
    next()
  }
}
</script>

在上面的代码中，我们在导航栏中添加了两个链接/和/about，以便在不同页面之间导航。在beforeRouteLeave方法中，我们使用window.history.pushState()方法来将URL设置为上一页的URL，这样点击返回按钮时，将返回到上一页。