<keep-alive :include="cachedViews">
          <router-view :key="key" />
        </keep-alive>

当我们在项目中配置了keep-alive后，会发现页面关闭不能触发beforeDestroy。

首先我们来看看keep-alive是什么东西

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。

它的作用不言而喻

用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。

看完如上你是不是就豁然开朗，知道为什么关闭页面不触发beforeDestroy了。总结如下：

不设置keep-alive，离开当前路由时，会调用beforeDestroy和destroyed来销毁。
当设置keep-alive之后，不会直接调用这组销毁生命周期函数，而是在生命周期函数中新增两个：activated和deactivated。

1.第一次进入页面时，生命周期函数执行简单来说是这样的：

2.当退出时，会触发deactivated()函数；

3.当再次进入该页面时，只会执行activated()函数。

解决方法有2种

1.直接调用deactivated

 deactivated() {
    clearInterval(this.timer)
  },

2.配合导航守卫，手动调用生命周期销毁函数

beforeRouteLeave (to, from, next) {
    this.destroy();
    next();
}

 

延伸下知识，看看keep-alive有哪些用法。

方式一：在App.vue中使用keep-alive标签，表示缓存所有页面

 <div id="app">
  	<keep-alive>
	    <tar-bar></tar-bar>
	    <div class="container">
	      <left-menu></left-menu>
	      <Main />
	    </div>
    </keep-alive>
  </div>

方式二：按条件缓存，使用include，exclude判断是否缓存

// 1. 将缓存 name 为 cc 的组件,如果有多个，可用逗号分
  	<keep-alive include='cc'>
      <router-view/>
    </keep-alive>
// 2. 将不缓存 name 为 cc 的组件
	<keep-alive exclude='cc'>
  	  <router-view/>
	</keep-alive>
// 3. 还可使用属性绑定动态判断
	<keep-alive :include='includedComs'>
  	  <router-view/>
	</keep-alive>

方式三：在router目录下的index.js中，

第一步：使用meta:{keepAlive = true },表示需要缓存

 const routes = [
  {
    path:'/',
    component:Home,
    meta:{
        keepalive:true
    }
  },
  {
    path:'/login',
    component:Login
  },
   {
      path:'/edit',
      component:Edit,
      meta:{
          istoken: true
      }
   },
  {
      path:'/home',
      component:Home,
      meta:{
          keepalive:true
      }
  }
]

第二步：在App.vue中进行判断

本人用的是第二种。