项目中遇到可以有多个入口进入一个页面a,在a页面要调不通的接口进行判断所带过来的信息,可在mounted里面进行判断,此页面还有二级页面可以选择数据,那么就要求从二级页面退回页面a时,不走mounted里面的方法重新调取数据,不然会覆盖掉二级页面带回来的数据,所以就需要进入页面a时进行数据刷新,但是退回到页面a时,则不刷新该数据。
说明:例子为从页面2进入页面3时,调用接口,并把数据存到vuex中,从页面3进入页面4时,重新给页面3保存到vuex的数据进行赋值,在页面3中展示改变后的值。
文件结构如下图:
方法一:通过判断前进后退来实现
1.在vuex的store.js文件中新建direction和includePage两个变量来存储前进后退的判断值,完整的代码在下面方法二中的store.js中。
2.修改app.vue的代码:
<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')" >
<keep-alive :include='includePage'>
<router-view class='router-view'></router-view>
</keep-alive>
</transition>
3.修改main.js中的代码为:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import store from './vuex/store'
import App from './App'
import router from './router'
import './common/rem.js'
import "./assets/iconfont/iconfont.css"
Vue.config.productionTip = false
const history = window.sessionStorage
history.clear()
let historyCount = history.getItem('count') * 1 || 0
history.setItem('/', 0)
router.beforeEach(function(to, from, next) {
const toIndex = history.getItem(to.path);
const fromIndex = history.getItem(from.path);
//根据路由判断操作是前进还是后退,并把标记值存入vuex
if(toIndex) {
if(!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
store.commit('UPDATE_DIRECTION', 'forward')
} else {
store.commit('UPDATE_DIRECTION', 'reverse')
history.removeItem(from.path)
}
} else {
++historyCount
history.setItem('count', historyCount)
to.path !== '/' && history.setItem(to.path, historyCount)
store.commit('UPDATE_DIRECTION', 'forward')
}
if(/\/http/.test(to.path)) {
let url = to.path.split('http')[1]
window.location.href = `http${url}`
} else {
next()
}
})
import myheader from './components/header'
Vue.component('myheader', myheader);
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
4.在每次进入页面时执行调用方法,并把值存入vuex中。在mounted中执行以下方法:
getVal(){
GetLocalMethod('./static/data.json', '', true).then(res => {
store.commit('UPDATE_SAVETHREEVALUE', res.data.data[0].aa);
});
}
加上判断:
if(this.direction == 'forward'){ //进入到此页面
this.getVal();
}else{ //退回到该页面
}
注:关键是判断前进和后退的值
结束。
方法二:用keep-alive缓存来实现
用router.meta实现:
1.在app.vue中改写router-view,对router-view分开写(需要缓存和不需要缓存)
<keep-alive>
<!--会被缓存的视图组件-->
<router-view v-if="$route.meta.keepAlive" class='router-view'></router-view>
</keep-alive>
<!--不会被缓存的视图组件-->
<router-view v-if="!$route.meta.keepAlive" class='router-view'></router-view>
注:需要缓存功能必须用keep-alive标签进行包裹。
2.在路由index.js里面对页面3进行设置:
{
path: '/threePage',
name:'threePage',
title: 'threePage',
component: threePage,
meta: {
keepAlive: true // 需要被缓存
}
}
并调用以下方法把从接口获取的值写入vuex中的saveThreeVal进行保存:
getVal(){
GetLocalMethod('./static/data.json', '', true).then(res => {
store.commit('UPDATE_SAVETHREEVALUE', res.data.data[0].aa);
});
}
在进入页面时判断一下keepAlive的值并调用上面方法(进入页面3时this.$route.meta.keepAlive
值为false,退回到页面3时,this.$route.meta.keepAlive
值为true)
mounted(){
if(!this.$route.meta.keepAlive){
this.getVal();
}
}
3.在页面2中加入:
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // 让页面3不缓存,即刷新
next();
}
注:beforeRouteLeave方法和data、mounted方法等是同一级别的。
4.在页面4中加入:
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // 让页面3缓存,即不刷新
next();
}
并在页面4中执行对页面3写入到的vuex的saveThreeVal重新赋值:
在mounted内执行:
mounted(){
store.commit('UPDATE_SAVETHREEVALUE', 'abababab');
}
完成。
通过页面的整体缓存实现,其实也是用到了keep-alive。
操作说明:页面3进入页面4时,调用接口,并保存数据到vuex的saveFourVal中,同时页面上有输入框可以输入数据(此数据未保存到vuex中),从页面4进入页面5后,在页面5中对vuex的saveFourVal进行重新赋值,退回到页面4后不调用接口,并且之前输入到输入框中的值未被置空,还保留为此前输入值后的状态。
这个方法比较完整,具体操作如下:
1.在app.vue中改写router-view。
<transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')" >
<keep-alive :include='includePage'>
<!--会被缓存的视图组件-->
<router-view v-if="$route.meta.keepAlive" class='router-view'></router-view>
<router-view v-if="!$route.meta.keepAlive" class='router-view'></router-view>
</keep-alive>
</transition>
注:其中includePage是个数组,可以缓存多个页面。
2.在vuex文件中的store.js中新建一个数组includePage用于保存要缓存的页面。
代码如下:
import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './types'
Vue.use(Vuex)
const state = {
direction: 'forward',
includePage: [],
saveOneValue:'', //保存的第一个页面的值
saveThreeValue:'',//第三个页面保存的值
saveFourValue:'',//第四个页面保存的值
}
const actions = {
}
const getters = {
direction: state => state.direction,
includePage: state => state.includePage,
saveOneValue:state => state.saveOneValue,
saveThreeValue:state => state.saveThreeValue,
saveFourValue:state => state.saveFourValue,
}
const mutations = {
[types.UPDATE_DIRECTION] (state, direction) {
state.direction = direction;
},
[types.UPDATE_INCLUDE_PAGE] (state, obj) {
if(obj.flag){
state.includePage.push(obj.pageName);
}else{
state.includePage.splice(state.includePage.indexOf(obj.pageName),1);
}
},
[types.UPDATE_SAVEONEVALUE] (state, update) {
state.saveOneValue = update;
},
[types.UPDATE_SAVETHREEVALUE] (state, update) {
state.saveThreeValue = update;
},
[types.UPDATE_SAVEFOURVALUE] (state, update) {
state.saveFourValue = update;
}
}
//导出vue实例
export default new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state,
actions,
getters,
mutations
})
注:在同个文件夹下的type.js中进行声明的。
//公共
export const UPDATE_DIRECTION = 'UPDATE_DIRECTION' //更新routerview滑动方向
export const UPDATE_INCLUDE_PAGE = 'UPDATE_INCLUDE_PAGE' //更新routerview缓存页面
export const UPDATE_SAVEONEVALUE = 'UPDATE_SAVEONEVALUE' //更新存储到vuex的值
export const UPDATE_SAVETHREEVALUE = 'UPDATE_SAVETHREEVALUE' //更新第三个页面存储到vuex的值
export const UPDATE_SAVEFOURVALUE = 'UPDATE_SAVEFOURVALUE' //更新第四个页面存储到vuex的值
3.从页面3跳往页面4时执行方法goFour:
goFour() {
this.$router.push(`/fourPage`);
//对第四个页面缓存进行清除
if (this.includePage.indexOf("fourPage") != -1) {
this.$store.commit('UPDATE_INCLUDE_PAGE', {pageName: 'fourPage', flag: false});
};
}
4.在页面4中,从页面3跳到页面4执行
mounted(){
this.getFourVal();
//将此页面进行缓存
if (this.includePage.indexOf("fourPage") == -1) {
this.$store.commit('UPDATE_INCLUDE_PAGE', {pageName: 'fourPage', flag: true});
};
console.log(this.includePage);
}
并调用以下方法把从接口获取的值写入vuex中的saveFourVal进行保存:
getFourVal(){
GetLocalMethod('./static/data.json', '', true).then(res => {
store.commit('UPDATE_SAVEFOURVALUE', res.data.data[0].bb);
});
}
5.在页面5中修改vuex中的saveFourVal的值:
methods:{
changeFourVal(){
store.commit('UPDATE_SAVEFOURVALUE', '页面5修改后的值');
}
},
mounted(){
this.changeFourVal();
}
参考网址:https://segmentfault.com/a/1190000012083511
废话说完了,直接分享我的代码:
https://download.csdn.net/download/zuoyiran520081/10513197