两种方案:
第一种
// 在app.vue中添加
<router-view v-if="$route.meta.keepAlive"></router-view>
<router-view v-if="!$route.meta.keepAlive"></router-view
//详情页
beforeRouteLeave(to,from,next){
console.log("detail beforeRouteLeave")
console.log(this.$route.path)
if (to.name==="enterpriseList") {
if (!from.meta.keepalive) {
from.meta.keepalive=true
}
}else{
from.meta.keepalive=false
to.meta.keepalive=false
}
next()
},
//列表页
created() {
this.$route.meta.isFresh=true
console.log("this.$route.meta.isFresh: "+this.$route.meta.isFresh)
// this.currentPageChange(1)
},
beforeRouteEnter (to, from, next) {
console.log("list beforeRouteEnter")
if (from.name === 'enterpriseEdit' || from.name === 'enterpriseDetail') {
from.meta.keepLive = true;
to.meta.isFresh=false
} else {
from.meta.keepLive = false;
to.meta.keepLive = false;
to.meta.isFresh=true
}
next()
},
beforeRouteLeave(to, from, next) {
console.log("beforeRouteLeave")
if (to.name === 'enterpriseDetail' || to.name === 'enterpriseEdit') {
from.meta.keepLive = true;
} else {
from.meta.keepLive = false;
to.meta.keepLive = false;
}
next();
},
activated(){
console.log("list activated")
if (this.$route.meta.isFresh){
this.clearSearchInput()
this.currentPageChange(1)
} else{
this.currentPageChange(1)
}
},
//index页面在列表路由下的meta添加isFresh 和keepAlive
meta: {
isFresh:false,//是否刷新页面
keepAlive: true,//是否缓存
title: '企业列表',
rights: ['QYGL_LOOK']
}
这种方式写起来比较麻烦,代码量多,加的isFresh是判断什么时候调初始话方法
第二种方案
混入:
//list页面 先导入 在
import PathParams from '../../mixin/pass-params'
mixins: [PathParams],
allowPaths:['/enterprise/detail','/enterprise/edit','/enterprise/identity'],
添加两个方法 makeParams() getParams(params)
//跳转其他页面带参数
makeParams(){
console.log("makeParams")
return this.query;
},
//获取参数
getParams(params){
console.log("getParams")
this.query = params;
this.initData()
},
在created中加入判断,是否需刷新
console.log('isRefresh:'+this.$route.meta.isRefresh)
if (this.$route.meta.isRefresh===1){fn()}
//index.js页面中 所有list的路由下的meta添加isRefresh:1
写一个mixin.js
//单独写一个mixin.js
export default {
beforeRouteLeave(to, from, next) {
console.log("detail beforeRouteLeave")
console.log("this.$route.path:"+this.$route.path)
if (this['makeParams'] && typeof (this['makeParams'] === 'function')) {
let cacheKey = this.$route.path
let cacheValue = this['makeParams']()
if (cacheValue) {
if (to.meta.isRefresh===undefined || to.meta.isRefresh===null) {
localStorage.setItem(cacheKey, JSON.stringify(cacheValue))
from.meta.isRefresh=0
}else{
from.meta.isRefresh=1
to.meta.isRefresh =1
}
}
}
next()
},
beforeRouteEnter(to, from, next) {
console.log("list beforeRouteEnter")
next((vm) => {
console.log(vm)
let allowPaths = vm.$options.allowPaths || [];
let pass = false;
for (let x in allowPaths) {
if (allowPaths[x].indexOf(from.path) > -1 && from.path!=='/') {
pass = true
break
}
},
if (vm['getParams'] && typeof (vm['getParams'] === 'function')) {
let cacheKey = vm.$route.path
let cacheValue = localStorage.getItem(cacheKey);
if (cacheValue && cacheValue.length) {
cacheValue = JSON.parse(cacheValue)
if (cacheValue) {
console.log("pass:"+pass)
if (pass) {
vm['getParams'](cacheValue)
} else{
localStorage.setItem(vm.$route.path, null)
}
}
}
}
})
},
}