vue路由进入下一层返回上一层重复跳转之前进入页面
时间: 2023-08-19 22:04:50 浏览: 90
你可以使用 Vue Router 提供的导航守卫(Navigation Guards)来实现这个功能。具体来说,你可以在 `beforeRouteLeave` 导航守卫中记录当前路由的路径,并在下一次进入该路由时将其作为参数传递给该路由。这样,当你从下一层返回上一层时,路由会重定向到之前进入页面的路径。
以下是一个简单的示例代码:
```javascript
// 在上一层路由中定义 beforeRouteLeave 导航守卫
beforeRouteLeave (to, from, next) {
// 记录当前路由路径
this.$store.commit('setLastRoute', from.path)
next()
}
// 在下一层路由中定义 beforeEnter 导航守卫
beforeEnter (to, from, next) {
// 获取上一次进入页面的路径
const lastRoute = this.$store.state.lastRoute
if (lastRoute) {
// 重定向到之前进入页面的路径
next(lastRoute)
} else {
next()
}
}
```
在上面的代码中,我们使用了 Vuex 来存储上一次进入页面的路径。在上一层路由的 `beforeRouteLeave` 导航守卫中,记录当前路由路径并将其保存到 Vuex 状态中。在下一层路由的 `beforeEnter` 导航守卫中,获取上一次进入页面的路径并将其作为参数传递给 `next` 函数,实现路由的重定向。
阅读全文