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