今天在做APP页面的时候查询条件很多,查询条件和查询结果页面是两个页面,在列表页面返回的时候还保存着查询条件。然后查询条件页面是封装的一个对象传过去给查询列表,在详情返回的时候,列表页面也要保存状态。
我们可以在配置路由的时候添加keepAlive: true,如下:
{
path: '/concrete/sampleQuery',
meta: { title: '样品查询', keepAlive: true },
component: () => import('@/views/concrete/sampleQuery/Index')
},
{
path: '/concrete/sampleList',
meta: { title: '样品查询列表', keepAlive: true },
component: () => import('@/views/concrete/sampleList/Index')
},
在路由跳转前,把需要传过去的对象写到vuex里面或者缓存
onSubmit() {
this.$store.commit('form', this.form)
sessionStorage.setItem('form', JSON.stringify(this.form))
this.$router.push({
path: '/concrete/sampleList',
query: {
form: this.form
}
})
},
由于路由设置咯keepAlive:true,所以虽然保存了条件查询的记录,但是改变条件重新查询之后,就没进create,mounted了,所以我们需要在activaed钩子里面重新请求
activated() {
this.form.data = this.$store.state.form
this.getList()
},
在vuex里面需要
mutations: {
form(state, payload) {
state.form = payload
}
},
这样就解决了今天的问题。不知道有没有其他神奇的问题出现。暂时没出现其他毛病。