首先在router中配置当前路由是否被缓存
{path: '/demo1',
name: 'demo1',
meta: {
keepAlive: true // 需要缓存
},
component: resolve => { require(['../view/demo1.vue'], resolve) }
},
{
path: '/demo2',
name: 'demo2',
component: resolve => { require(['../view/demo2.vue'], resolve) },
meta: {
keepAlive: false // 不需要缓存
}
},
在app.vue中设置缓存的router-view
<keep-alive>
<router-view v-if="$route.meta.keepAlive" class="ui-view" :transition="effect" transition-mode="out-in"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" class="ui-view" :transition="effect" transition-mode="out-in"></router-view>
目标： 从demo1跳转到demo2 从demo2传值到demo1这时demo1的created是不会触发的
keep-alive提供了2个方法
activated: function () {
// 当组件被缓存时 created不会触发 此时activated会触发
},
deactivated: function () {
}
// 传值可以使用vuex 或者使用公共的bus
eg: eventBus.js
import Vue
from
'vue'
/**
* 定义空的vue实例，作为 eventbus实现非父子组件之间的通信(vue2.x中去掉了broadcast)
*/
var eventBus
=
new
Vue({})
export
default eventBus
在需要的页面引入 demo2
import enentBus
from
'.eventBus.js'
enentBus.
$emit
(
'add'
,
'11212'
)
/调用router回退页面
this.$router.
go(
-
1); // 在这里为什么使用回退 因为安卓不好监听这个页面回退 所以前端处理比较好
demo1
activated (){
enentBus.
$on(
'add',
function(
data){
this.searchParams
= data; //
this
.searchParams 是我在data定义的值 当从demo2跳转到demo1时会触发这个生命周期钩子
}.
bind(
this))
}