Vue Router 携带参数返回上一页

在 Vue.js 中携带参数返回上一页

在 Vue.js 项目中，经常需要在不同页面之间跳转，同时携带一些参数，以便在新的页面中使用。例如，当从列表页点击一个项目跳转到详情页时，可能需要传递项目的 ID。本文将介绍如何在 Vue Router 中携带参数进行跳转和返回上一页，并解决一些常见问题。

使用 $router 携带参数进行跳转

Vue Router 提供了 $router 对象，可用于进行页面跳转。$router 对象包含 push 和 replace 方法，可用于携带参数进行跳转。

this.$router.push({
  path: '/detail',
  query: { id: 1 }
})

以上代码将跳转到 /detail 路由，并以查询参数的形式传递 id 参数。查询参数将显示在 URL 中。

使用 beforeRouteEnter 获取上个页面的路径

在新页面中，可以使用 beforeRouteEnter 守卫获取上个页面的路径。beforeRouteEnter 守卫会在进入当前路由之前被调用，因此可以用来存储上个页面的路径。

export default {
  beforeRouteEnter(to, from, next) {
    this.previousPath = from.fullPath
    next()
  }
}

以上代码将 from.fullPath 存储在 this.previousPath 变量中。from.fullPath 包含了上个页面的完整路径，包括查询参数。

返回上一页

使用 $router 对象的 go 方法可以返回上一页。go 方法接受一个数字参数，表示要返回的页面数。例如，如果要返回上一页，可以使用以下代码：

this.$router.go(-1)

以上代码将返回到上一个页面。

解决列表页非第一页数据跳转列表详情页再返回后展示的数据是第一页的问题

如果从列表页的非第一页跳转到列表详情页，再返回后发现展示的数据是第一页，可以使用以下方法解决：

1. 在列表页中，使用 beforeRouteLeave 守卫来存储当前页码。
2. 在列表详情页中，使用 beforeRouteEnter 守卫来获取上个页面的页码。
3. 在返回列表页时，使用 $router 对象的 push 方法跳转到指定的页码。

// 列表页
export default {
  beforeRouteLeave(to, from, next) {
    this.currentPage = from.query.page
    next()
  }
}

// 列表详情页
export default {
  beforeRouteEnter(to, from, next) {
    this.currentPage = from.query.page
    next()
  }
}

// 返回列表页
this.$router.push({
  path: '/list',
  query: { page: this.currentPage }
})

以上代码将确保在返回列表页时，展示的数据是返回前的页码。

常见问题解答

1. 如何传递多个参数？
   将多个参数传递给 query 对象即可。例如：

   this.$router.push({
     path: '/detail',
     query: { id: 1, name: 'John' }
   })
   

2. 如何在新的页面中访问查询参数？
   可以在 this.$route.query 中访问查询参数。例如：

   console.log(this.$route.query.id)
   

3. 如何阻止页面跳转？
   在 beforeRouteLeave 守卫中返回 false 可以阻止页面跳转。例如：

   export default {
     beforeRouteLeave(to, from, next) {
       if (this.isDirty) {
         next(false)
       } else {
         next()
       }
     }
   }
   

4. 如何使用编程方式跳转到不同的路由？
   可以使用 this.$router.push 和 this.$router.replace 方法使用编程方式跳转到不同的路由。例如：

   this.$router.push('/detail')
   

5. 如何监听路由变化？
   可以使用 this.$router.afterEach 方法监听路由变化。例如：

   this.$router.afterEach((to, from) => {
     console.log('路由已更改')
   })
   

结论

本文介绍了如何在 Vue.js 中携带参数返回上一页。涵盖了携带参数跳转、获取上个页面的路径、解决列表页非第一页数据跳转列表详情页再返回后展示的数据是第一页的问题等内容。通过掌握这些技术，可以轻松地在 Vue.js 项目中实现携带参数返回上一页的功能。