vue在返回上一級頁面時,保留上次的查詢條件;查詢條件頁面是封裝的一個對象傳過去給查詢列表,在詳情返回的時候,列表頁面也要保存狀態


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM