keepalive应用

src/projects/business/router/index.js

@@ -30,9 +30,10 @@ const router = new VueRouter({
 	//base: process.env.BASE_URL,
 	routes,
 
+	// keep-alive 返回缓存页面后记录浏览位置  
 	scrollBehavior(to, from, savedPosition) {
 		if (savedPosition) {
-			return savedPosition
+			return savedPosition;
 		} else {
 			return {
 				x: 0,
@@ -40,7 +41,7 @@ const router = new VueRouter({
 			}
 		}
 	},
-	
+
 })
 
 export default router

src/projects/business/views/Layout.vue

@@ -1,13 +1,23 @@
 <template>
 	<div>
-		<keep-alive>
-			<router-view v-if='$route.meta.keepAlive'></router-view>
+		<keep-alive :include="keep_alive_components">
+			<router-view></router-view>
 		</keep-alive>
-		<router-view v-if='!$route.meta.keepAlive'></router-view>
 	</div>
 </template>
 
 <script>
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		computed: {
+			...mapGetters({
+				keep_alive_components: 'keep_alive_components',
+			})
+		}
+	}
 </script>
 
 <style>

src/projects/business/views/Master/Attendance/VerifyList.vue

@@ -6,12 +6,12 @@
 		<div class="mui-content vongi-wordcard-sp">
 			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
 				<div class="mui-scroll">
-					<router-link :to="{name:'MasterAttendanceVerifyList',query:{status:0}}" :class="'mui-control-item '+(listForm.status==0?'mui-active':'')">
+					<a @click="reloadList('0')" :class="'mui-control-item '+(listForm.status==0?'mui-active':'')">
 						<span class="fyy-badge">待处理<span class="mui-badge" v-if="firstRecordsTotal" v-text="firstRecordsTotal"></span></span>
-					</router-link>
-					<router-link :to="{name:'MasterAttendanceVerifyList',query:{status:3}}" :class="'mui-control-item '+(listForm.status==3?'mui-active':'')">
+					</a>
+					<a @click="reloadList('3')" :class="'mui-control-item '+(listForm.status==3?'mui-active':'')">
 						已处理
-					</router-link>
+					</a>
 				</div>
 			</div>
 
@@ -25,7 +25,7 @@
 						<div class="mui-scroll-wrapper vongi-over-hei">
 							<div class="mui-scroll">
 								<form class="mui-input-group fyy-checkbox">
-									<div v-for="(item,index) in recordList" :key="item.id" class="mui-input-row mui-checkbox mui-left">
+									<div v-for="(item,index) in recordList" :key="'s0_'+item.id" class="mui-input-row mui-checkbox mui-left">
 										<router-link :to="{name:'MasterAttendanceVerifyInfo',query:{id:item.id}}" class="mui-navigate-right">
 											<div class="mui-media-object mui-pull-left vongi-buka"><img :src="item.faceImageUrl"></div>
 											<div class="mui-media-body">
@@ -48,7 +48,7 @@
 						<div class="mui-scroll-wrapper">
 							<div class="mui-scroll">
 								<ul class="mui-table-view mui-table-view-chevron">
-									<li v-for="(item,index) in recordList" :key="item.id" class="mui-table-view-cell mui-media">
+									<li v-for="(item,index) in recordList" :key="'s3_'+item.id" class="mui-table-view-cell mui-media">
 										<router-link :to="{name:'MasterAttendanceVerifyInfo',query:{id:item.id}}" class="mui-navigate-right">
 											<div class="mui-media-object mui-pull-left vongi-buka"><img :src="item.faceImageUrl"></div>
 											<div class="mui-media-body">
@@ -269,9 +269,19 @@
 		},
 		watch: {
 			//本页面监听到路由（参数）改变
-			'$route': function(to, from) {
+			/* '$route': function(to, from) {
 				this.reloadList(to.query.status ? to.query.status : 0)
+			} */
+		},
+		//keepalive监控判断
+		beforeRouteLeave(to, from, next) {
+			console.log(to.name);
+			if (['MasterAttendanceVerifyInfo'].indexOf(to.name) > -1) {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', ['MasterAttendanceVerifyList'])
+			} else {
+				this.$store.commit('SET_KEEP_ALIVE_COMPONENTS', [])
 			}
+			next()
 		},
 	}
 </script>

src/store/getters.js

@@ -34,4 +34,6 @@ export const invitation_code = state => state.invitation_code
 
 export const default_examine_person = state => state.default_examine_person
 
-export const activity_form_data = state => state.activity_form_data
+export const activity_form_data = state => state.activity_form_data
+
+export const keep_alive_components = state => state.keep_alive_components

src/store/mutation-types.js

@@ -17,4 +17,6 @@ export const SET_REGISTER_EXAMINE_FORM = 'SET_REGISTER_EXAMINE_FORM'
 export const SET_WD_MESSAGE_NUM = 'SET_WD_MESSAGE_NUM'
 export const SET_INVITATION_CODE = 'SET_INVITATION_CODE'
 export const SET_DEFAULT_EXAMINE_PERSON = 'SET_DEFAULT_EXAMINE_PERSON'
-export const SET_ACTIVITY_FORM_DATA = 'SET_ACTIVITY_FORM_DATA'
+export const SET_ACTIVITY_FORM_DATA = 'SET_ACTIVITY_FORM_DATA'
+
+export const SET_KEEP_ALIVE_COMPONENTS = 'SET_KEEP_ALIVE_COMPONENTS'

src/store/mutations.js

@@ -120,6 +120,10 @@ const mutations = {
 		setActivityFormData(storage_prefix, data)
 		state.activity_form_data = data
 	},
+	
+	[types.SET_KEEP_ALIVE_COMPONENTS](state, data) {
+		state.keep_alive_components = data
+	},
 
 }
 

src/store/state.js

@@ -41,7 +41,8 @@ const state = {
 	wd_message_num: getWdMessageNum(storage_prefix),
 	invitation_code: getInvitationCode(storage_prefix),
 	default_examine_person: getDefaultExaminePerson(storage_prefix),
-	activity_form_data: getActivityFormData(storage_prefix)
+	activity_form_data: getActivityFormData(storage_prefix),
+	keep_alive_components: '',
 }
 
 export default state