vue页面实现修改,查看跳转路由,返回时页面搜索条件还在
时间: 2024-03-28 22:41:45 浏览: 52
vue 实现路由跳转时更改页面title
5星 · 资源好评率100%
可以使用 Vue Router 提供的导航守卫来实现在路由跳转时保存页面状态,包括搜索条件。具体的做法是在路由跳转前,将当前页面的搜索条件保存在 Vuex 的 state 中,然后在路由跳转后再将搜索条件还原到页面上。下面是一个简单的实现示例:
1. 在 Vuex 的 state 中定义一个变量来保存搜索条件:
```
state: {
searchCondition: {}
}
```
2. 在路由跳转前,保存当前页面的搜索条件:
```
router.beforeEach((to, from, next) => {
if (from.path === '/search') {
store.commit('saveSearchCondition', from.query)
}
next()
})
```
3. 在路由跳转后,将搜索条件还原到页面上:
```
router.afterEach((to, from) => {
if (to.path === '/search') {
store.commit('restoreSearchCondition', to.query)
}
})
```
4. 在组件中使用搜索条件:
```
computed: {
searchCondition() {
return this.$store.state.searchCondition
}
}
```
这样就可以实现在路由跳转时保存页面状态,搜索条件不会丢失。
阅读全文