问题描述：一个页面只有第一次进入会获取数据，之后就不会获取数据（不会发起网络请求）

我们发现只有第一次进入页面时才会请求数据，这就有一个问题，如果是详情页面，这样详情的内容就不会刷新，点击不同的商品详情都是同一个，每次需要手动刷新才能，这真的体验很不好

主要原因设置了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进行的总结，非常感谢