问题描述:一个页面只有第一次进入会获取数据,之后就不会获取数据(不会发起网络请求)

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

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

Logo

前往低代码交流专区

更多推荐