資訊專(zhuān)欄INFORMATION COLUMN
摘要：需求背景再列表頁(yè)進(jìn)行一系列的篩選條件之后，點(diǎn)擊某一個(gè)進(jìn)入詳情頁(yè)，當(dāng)從詳情頁(yè)返回列表頁(yè)的時(shí)候，需要保留之前的篩選條件。
需求背景
再列表頁(yè)進(jìn)行一系列的篩選條件之后，點(diǎn)擊某一個(gè)進(jìn)入詳情頁(yè)，當(dāng)從詳情頁(yè)返回列表頁(yè)的時(shí)候，需要保留之前的篩選條件。
之前的實(shí)現(xiàn)方法
路由跳轉(zhuǎn)的時(shí)候，把篩選條件json對(duì)象放到query中去，傳到詳情頁(yè)，返回的時(shí)候再帶回來(lái)，會(huì)導(dǎo)致在url后面一直會(huì)有這么一堆東西新的實(shí)現(xiàn)方法：
**vuex + cookie**
### vuex ####
state: {
changeFilter: {}//變更列表篩選條件
},
mutations: {
setChangeFilter (state, changeFilter) {
state.changeFilter = changeFilter;
}
}
### cookie ###
//設(shè)置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;//是否是從詳情頁(yè)過(guò)來(lái)的，來(lái)決定是否加載param
methods: {
goToDetail (id) {
//設(shè)置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為空的時(shí)候他的值為{}
this.param = filter;
this.currentPage = this.param.page;
this.changeTypeData.changeSelected = this.param.status;
};
};
this.getBranchList(this.param);//進(jìn)入列表頁(yè)的時(shí)候請(qǐng)求數(shù)據(jù)的方法
},
beforeRouteEnter: function (to,from,next) {
if (from.name == "changeinfo"){
isFromDetailBol = true;
};
next();
//一開(kāi)始的時(shí)候我是在這里來(lái)進(jìn)行數(shù)據(jù)的操作的，這里不能直接獲得this，需要 next ((vm) =>{ vm.$stroe.state.changeFilter })這樣獲取，而且next里的方法要在create之后執(zhí)行（這里他和組件其他鉤子函數(shù)的執(zhí)行順序需要了解一下去
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97718.html
摘要：使用開(kāi)始支持，通過(guò)方式，將頁(yè)碼作為參數(shù)存儲(chǔ)在中，將選擇條件存儲(chǔ)在中尚不清楚數(shù)據(jù)具體是存儲(chǔ)在哪里通過(guò)方式獲取頁(yè)碼通過(guò)方式獲取存儲(chǔ)的選擇條件。具體實(shí)現(xiàn)技術(shù)選擇開(kāi)關(guān)為分頁(yè)組件添加一個(gè)開(kāi)關(guān)，因?yàn)樾枰叶壬暇€(xiàn)，萬(wàn)一有問(wèn)題，要調(diào)整的頁(yè)面也只有一個(gè)。 這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁(yè)面的數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)...
摘要：使用開(kāi)始支持，通過(guò)方式，將頁(yè)碼作為參數(shù)存儲(chǔ)在中，將選擇條件存儲(chǔ)在中尚不清楚數(shù)據(jù)具體是存儲(chǔ)在哪里通過(guò)方式獲取頁(yè)碼通過(guò)方式獲取存儲(chǔ)的選擇條件。具體實(shí)現(xiàn)技術(shù)選擇開(kāi)關(guān)為分頁(yè)組件添加一個(gè)開(kāi)關(guān)，因?yàn)樾枰叶壬暇€(xiàn)，萬(wàn)一有問(wèn)題，要調(diào)整的頁(yè)面也只有一個(gè)。 這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁(yè)面的數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)...
摘要：?jiǎn)栴}由來(lái)最近用做前端項(xiàng)目，從查詢(xún)頁(yè)面進(jìn)入詳情頁(yè)時(shí)，返回頁(yè)面需要保留上次的查詢(xún)條件，表格當(dāng)前頁(yè)數(shù)。從其他菜單進(jìn)去，不需要緩存，要保持頁(yè)面的初始狀態(tài)。當(dāng)進(jìn)入詳情頁(yè)，需要對(duì)該條數(shù)據(jù)進(jìn)行修改時(shí)，修改成功后返回，應(yīng)該更新列表。 問(wèn)題由來(lái) 1、最近用vue做前端項(xiàng)目，從查詢(xún)頁(yè)面進(jìn)入詳情頁(yè)時(shí)，返回頁(yè)面需要保留上次的查詢(xún)條件，表格當(dāng)前頁(yè)數(shù)。2、從其他菜單進(jìn)去，不需要緩存，要保持頁(yè)面的初始狀態(tài)。基于上面...
閱讀 3177·2021-11-22 09:34
閱讀 2596·2021-09-30 09:47
閱讀 1503·2021-09-03 10:32
閱讀 3821·2021-08-16 10:49
閱讀 1850·2019-08-30 15:55
閱讀 2537·2019-08-30 15:52
閱讀 3381·2019-08-30 15:44
閱讀 1426·2019-08-30 15:44
