vue页面详情页返回列表页_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'

})

}