Vue 路由跳转设置不刷新

一、问题描述
在某些情况下，vue项目前端有些情况下需要设置路由跳转，页面不刷新，比如:

前进导航刷新页面，后退不刷新，page1–>page2–>page3，每次前进到一个新页面都需要获取数据，而按下后退键后，不再获取新数据，而是使用之前缓存的数据；
Tab也之间切换，某些页面不需要刷新，因为刷新页面会重置用户的过滤条件，对用户体验十分不友好；
二、什么是keep-alive
keep-alive顾名思义，保持活跃。保持谁活跃呢？
首先我们知道，因为vue就是组件化编程，一个.vue文件就是一个组件。就像万事万物一样，都有从出生到消亡的生命周期过程，vue的组件也是一样，也有自己的生命周期，比如create创建组件、mounted往组件上挂数据、update更新组件上挂的数据，destroy把组件实例销毁。
所以使用keep-alive就是保持组件活跃，不会被destroy销毁掉，就一直还活着，组件没有被销毁掉的话，组件上挂载的数据就还存在，所以状态就可以保留，所以，keep-alive就可以保持组件的状态。

三、keep-alive属性

include 值为字符串或者正则表达式，匹配的组件会被缓存。

exclude 值为字符串或正则表达式，匹配的组件不会被缓存。

四、生命周期
当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

1. activated
   在 keep-alive 组件激活时调用

使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务

2.deactivated
注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用

五、keep-alive的用法
5.1、include/exclude用法

// include 只缓存组件名字为home的组件，其他组件不会缓存，而exclude恰好相反
<keep-alive include="home">
   <router-view />
</keep-alive>

5.2、keep-alive结合路由中的meta属性来控制组件缓存
5.2.1 根据需要设置路由是否需要缓存

{
    path: '/',
    name: 'home',
    meta: {
        keepAlive:true
    },
    component: Home
}

5.2.2 router-view中判断时候需要keep-alive缓存控制

<keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

六、产生问题
组件被缓存，当关闭菜单（路由）并没有被销毁，所以组件在切换的时候也就不会被重新创建，也就不会调用created等生命周期函数

解决方法
使用activated与deactivated来获取当前组件是否处于活动状态我在home组件里面写入了activated与deactivated生命周期函数
activated：组件激活时调用

activated(){
// 进入home组件就会打印
console.log(“路由被激活，初始化路由”)
}
deactivated：组件停用时调用

deactivated(){
// 关闭home组件就会打印
console.log(“路由被销毁，销毁路由”)
}
七、钩子函数的执行顺序
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed；

使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated；
再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated ，created和mounted不会再执行；