亲宝软件园·资讯

展开

vue3使用router4 keepalive

懵懂的程序员小曲 人气:5

vue3使用router4 keepalive问题

项目从vue2升级到vue3,路由也紧跟着升级到了4,然后在使用keep-alive的时候一直不生效,就去查文档

vue2.x与vue3.0的App.vue配置有差异,在App.vue配置信息如下:

vue2.x中,router-view可整个放入keepalive中,如下:

<template>
    <!-- vue2.x配置 -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
</template>
<template>
  <!-- vue3.0配置 -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

但是假如按照这样配置,会有一个问题,假如A页面时缓存页面,跳转到B页面也是缓存页面的话

就会是报Uncaught (in promise) TypeError: parentComponent.ctx.deactivate is not a function 这个错误

所以 需要再中间中配置key值,来表示组件的唯一性和对应关系,如::key="$route.path"

而且 不要动态修改to.meta.keepAlive的值控制是否缓存。

会存在第一次将to.meta.keepAlive设置为true是还是会发送请求,因为第一次是创建组件,没有缓存,需要缓存后,下一次进入才不会发送请求。因为如果最开始进入的时候to.meta.keepAlive值为false的话,渲染的是没有使用keep-alive的组件。

使用keepalive的坑

vue中使用keepAlive数据不刷新,只缓存第一次进入的页面数据。

需求

首页进入列表页,根据不同id刷新列表页面数据,列表页进入详情页,详情页返回列表页时不刷新。

<keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
        <router-view v-if="!$route.meta.keepAlive">
</router-view>
{
        path: '/detail/:type/:articleId/:expertId/:status/:synMatchId/:matchType',
        name: 'Detail',
        component: () => import( /* webpackChunkName: "detail" */ '../views/Detail'),
        meta: {
            hidden: true,
            title: "详情"
        }
},
{
        path: '/match/detail/:id',
        name: 'MatchDetail',
        component: () => import( /* webpackChunkName: "matchdetail" */ '../views/Match/detail.vue'),
        meta: {
            hidden: true,
            title: "详情",
            keepAlive: true
        }
},

这个路由是列表页的路由,按照这种方式写的话确实会缓存页面,但是每次切换页面的时候会导致数据还是旧的。

解决

首先在路由中配置isrefersh用来监测页面从新获取数据

{
        path: '/detail/:type/:articleId/:expertId/:status/:synMatchId/:matchType',
        name: 'Detail',
        component: () => import( /* webpackChunkName: "detail" */ '../views/Detail'),
        meta: {
            hidden: true,
            title: "详情",
            isrefersh:true
        }
},
{
        path: '/match/detail/:id',
        name: 'MatchDetail',
        component: () => import( /* webpackChunkName: "matchdetail" */ '../views/Match/detail.vue'),
        meta: {
            hidden: true,
            title: "详情",
            keepAlive: true,
            isrefersh:true
        }
},

首页

当离开首页时判断是否去列表页,去的话给isrefersh设置为true

beforeRouteLeave (to, from, next) { 
    if(to.name=="MatchDetail" || to.name=="MatchDetail2")
    {
        to.meta.isrefersh = true;
    }
    next(); 
},

列表页

进入列表页的时候设置keppAlive,然后通过isrefersh判断是否刷新页面

**注:**不用再created 或 mounted生命周期中调用接口了,beforeRouteEnter在每次进入这个页面的时候都会触发

beforeRouteEnter(to, from, next){ 
    to.meta.keepAlive= true; 
    next(vm=>{ 
    //这里把页面初始值重新赋值,以刷新页面 
    if(vm.$route.meta.isrefersh){ 
            vm.programmeData=[]
            vm.$route.meta.isrefersh=false;
            vm.init();// 重新调用数据接口
    } })
},
beforeRouteLeave(to, from, next) {
    from.meta.keepAlive= true
    next();
},

详情页

在详情页中判断如果返回列表页设置keepAlive,并不需要刷新数据。

beforeRouteLeave (to, from, next) { 
    if(to.name=="MatchDetail" || to.name=="MatchDetail2"){
        to.meta.keepAlive = true; 
        to.meta.isrefersh=false; 
      }
    next()
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。 

加载全部内容

相关教程
猜你喜欢
用户评论