背景:
1、A列表页面 --- 跳转到 --- B填写页面 (B页面不要缓存)。
2、A列表页面 --- 跳转到 --- B填写页面(填写了内容) --- 跳转到(B页面需要缓存) --- C选择单位页面再回到B页面,要显示 B页面之前填写的内容。
用vue-router中的keepAlive设置为true是不可行的。
// ********app.vue文件*******
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
// ********router.config.js文件*******
{
path: '/A',
name: 'A',
component: () =>import ('@/views/A'),
meta: {
title: 'A列表页面',
keepAlive: false
}
},
{
path: '/B',
name: 'B',
component: () =>import ('@/views/B'),
meta: {
title: 'B填写页面',
keepAlive: true // 设置B页面缓存
}
},
{
path: '/C',
name: 'C',
component: () =>import ('@/views/C'),
meta: {
title: 'C单位选择页面',
keepAlive: false
}
}
// 在B填写页面拦截路由跳转,动态修改B填写页面的缓存
beforeRouteLeave(to, from, next) {
if (to.name === 'C') {
from.meta.keepAlive = true // 跳转C单位选择页面,设置B填写页面(本页面)缓存
}else{
from.meta.keepAlive = false // 跳转A列表页面,设置B填写页面(本页面)不缓存
}
next()
},
注:::::以上这种方式是不行的。
可行方案:
结合keep-alive的include属性和vuex进行缓存。
image.png
首先安装vuex
安装后新建store.js
// ********store.js文件*******
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
keepAlive: []
},
mutations: {
setKeepAlive: (state, keepAlive) => {
state.keepAlive = keepAlive
}
},
getters: {
keepAlive: state => state.keepAlive
}
})
//在main.js里面引入store.js
// ********main.js文件*******
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
// ********app.vue文件*******
<div id="app">
<keep-alive :include="keepAlive">
<router-view></router-view>
</keep-alive>
</div>
<script>
export default {
name: 'MainView',
computed: {
keepAlive() {
return this.$store.getters.keepAlive
}
}
}
</script>
// ********A列表页面.vue文件*******
// 在A列表页面点击进入 B填写页面时
this.$store.commit('setKeepAlive', ['B']) // 设置B填写页面缓存
this.$router.push('/B') // 跳转B填写页面
// ********B填写页面.vue文件*******
// B填写页面的跳转路由拦截方法
beforeRouteLeave (to, from, next) {
if (to.name === 'C') { // 如果跳转是C单位选择页面,那就把当前B填写页面缓存起来。
this.$store.commit('setKeepAlive', ['B'])
} else {
this.$store.commit('setKeepAlive', []) // 跳转其它页面则清除缓存
}
next()
}
这种方式不依赖于vue-router中的keepAlive值,那怕设置为false,也可以通过上面的方式进行页面缓存。
这样就OK了!!!
网友评论