需求背景
再列表页进行一系列的筛选条件之后,点击某一个进入详情页,当从详情页返回列表页的时候,需要保留之前的筛选条件。
之前的实现方法
路由跳转的时候,把筛选条件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'
})
}
所有评论(0)