问题描述：一个页面只有第一次进入会获取数据，之后就不会获取数据（不会发起网络请求）
我们发现只有第一次进入页面时才会请求数据，这就有一个问题，如果是详情页面，这样详情的内容就不会刷新，点击不同的商品详情都是同一个，每次需要手动刷新才能，这真的体验很不好
主要原因设置了keep-alive缓存
<keep-alive>
<router-view></router-view>
</keep-alive>
使用keep-alive时钩子函数执行顺序：
beforeRouteEnter --> created --> mounted --> activated --> deactivated，
再次进入缓存页面时只会执行：
beforeRouteEnter --> activated --> deactivated
所以在缓存页面中如果需要第二次进入页面仍然发送请求，可以将ajax请求放在activated中
不使用keep-alive时钩子函数执行顺序：
beforeRouteEnter --> created --> mounted --> destroyed
代码：
在部门管理页面的代码中将原来的ajax请求有原来的mounted钩子中改到activated钩子中
activated(){
this.sectionTree();
},
效果如下：
我们发现将ajax请求放在activated钩子函数中，请求会重新发送，这就解决了第二次进入时不刷新的问题。
问题描述：但是这样无论从哪个页面进来都要进行ajax请求，但实际不是每次进入该缓存页面都要发送ajax请求的，比如从商品详情页面返回商品页面，商品没有发生变化，没必要再进行ajax请求
当我们点击返回时其实是不需要再次发送请求的 ，所以我们需要判断一下，本页面是从哪个页面进入的，如果是从详情页面进入的，则不需要进行ajax请求，如果是从其他页面进入的则需要进行ajax请求，这就用到了beforeRouteEnter 钩子函数
首先在index.js文件的路由中进行配置
{
path: '/orderDetail',
name: 'orderDetail',
component: orderDetail,
meta: {
requireAuth: true,
isBack:false,//判断是否是点击返回按钮进入页面的，默认是false
}
}
然后在订单查询页面的路由钩子函数进行设置
//如果是从详情页面过来的，则将isBack设置为true
beforeRouteEnter(to,from,next){
if(form.name == 'oederDetail'){
to.meta.isBack = true;
}
},
在activated钩子函数中进行判断：
activated(){
if(!this.$route.meta.isBack){
this.gettableData();
}
this.$route.meta.isBack = false;
},
效果如下：
这就比较符合我们的要求，当从别的页面进入时发送请求，但是从详情页面返回时不会重新进行请求
问题藐视：但是还是存在这样的问题，当我们刷新详情页面时，返回订单查询页面时发现数据没有了
主要原因：刷新后缓存消失，但是在订单页面又没有重新进行ajax请求
解决办法：判断是否刷新了页面，如果刷新了则重新进行ajax请求
如何判断是否刷新了页面呢？
当使用keep-alive后，只有第一次进入后会触发created钩子函数，再次进入就不再执行了。当用户刷新了页面，这个钩子函数就会又执行，我们可以利用这个小技巧来实现
在订单查询界面设置
data(){
return{
isFirstEnter = false,
}
},
created(){
this.isFirstEnter = true;
},
activated(){
//刷新后要重新进行ajax请求
if(!this.$route.meta.isBack || this.isFirstEnter){
this.gettableData();
}
this.$route.meta.isBack = false;
this.isFirstEnter=false;
},
效果如下：
这样就解决所有问题了
以上代码仅说明了设置了keep-alive的解决办法，没有设置keep-alive就正常处理就好
最后说一下如何设置页面缓存还是不缓存
在index.js的meta中设置keepAlive参数
然后在使用router的页面中设置
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
本文主要是根据博主冰扬https://segmentfault.com/a/1190000012083511进行的总结，非常感谢