脚本宝典收集整理的这篇文章主要介绍了vue 详情页返回列表页，保留列表页之前的筛选条件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

需求背景

    再列表页进行一系列的筛选条件之后，点击某一个进入详情页，当从详情页返回列表页的时候，需要保留之前的筛选条件。 
    

之前的实现方法

    路由跳转的时候，把筛选条件json对象放到query中去，传到详情页，返回的时候再带回来，会导致在url后面一直会有这么一堆东西

新的实现方法：

**vuex + cookie**

    ### vuex ####
        state: {
            changeFilter: {}//变更列表筛选条件
        },
        mutations: {
            setChangeFilter (state, changeFilter) {
                state.changeFilter = changeFilter;
            }
        }
    

    ### cookie ###
        //设置cookie
        Vue.prototype.setCookie = function (name, value, day) {
            if (day !== 0) {
                var expires = day * 24 * 60 * 60 * 1000;
                var date = new Date(+new Date() + expires);
                document.cookie = name + "=" + escape(JSON.stringify(value)) + ";expires=" + date.toUTCString();
            } else {
                document.cookie = name + "=" + + escape(JSON.stringify(value));
            }
        };
        //获取cookie
        Vue.prototype.getCookie = function (name) {
            var arr;
            var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return JSON.parse(unescape(arr[2]));
            else 
                return null
        };

    ### list.vue ####
        var isFromDetailBol = false;//是否是从详情页过来的，来决定是否加载param
        methods: {
            goToDetail (id) {
                //设置cookie & vuex
                this.$store.commit('setChangeFilter',this.param)
                this.setCookie('changeFilter',this.param,1);
                this.$router.push({
                    path: '/versionflow/changeinfo',
                    query: {
                        id: id
                    }
                });
            }
        },
        created:function () {
            if ( isFromDetailBol) {
                var filter = (JSON.stringify(this.$store.state.changeFilter) == "{}") ? this.getCookie("changeFilter") : this.$store.state.changeFilter;
                if (JSON.stringify(filter) != "{}") {//这里不能使用 if(filter) ，filter为空的时候他的值为{}
                    this.param = filter;
                    this.currentPage = this.param.page;
                    this.changeTypeData.changeSelected = this.param.status;
                };
            };
          this.getBranchList(this.param);//进入列表页的时候请求数据的方法
        },
        beforeRouteEnter: function (to,from,next) {
            if (from.name == "changeinfo"){
                isFromDetailBol = true;
            };
            next();
            //一开始的时候我是在这里来进行数据的操作的，这里不能直接获得this，需要 next ((vm) =>{ vm.$stroe.state.changeFilter })这样获取，而且next里的方法要在create之后执行（这里他和组件其他钩子函数的执行顺序需要了解一下去????）
        },

    ### detail.vue ###
        returnList (){
            this.$router.push({
                path: '/versionflow/mychange'
            })
        }

脚本宝典总结

以上是脚本宝典为你收集整理的vue 详情页返回列表页，保留列表页之前的筛选条件全部内容，希望文章能够帮你解决vue 详情页返回列表页，保留列表页之前的筛选条件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。