今天在做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
}
},
這樣就解決了今天的問題。不知道有沒有其他神奇的問題出現。暫時沒出現其他毛病。