vue中keep-alive使用

首先在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))

}