vue keep-alive 返回到原来的页面 仍然调用了created和mounted方法

cythia_y
  • 17

实现从B页面跳转到A页面,A页面需要缓存

我的代码:

A页面路由配置:
{   path: 'tea_audit',
    meta: {
        keepAlive: true,

    },
    component: _import('teacher/tea_audit')
}
B页面路由配置:
{
    path: 'infoDetail/:id/:type',
    meta: {
        keepAlive: true,
    },
    hidden: true,
    component: _import('teacher/tea_infoDetail')
}
router-view:
<template>
  <section class="app-main">
    <transition name="fade" mode="out-in">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view :key="key"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" :key="key">
      </router-view>
    </transition>
  </section>
</template>

但是从B页面使用router-link返回A页面时,A页面执行了created和mounted方法
 <router-link :to="{ name: backPageName, params: {activeName: backTabName}}">返回</router-link>

为什么呀,A到B的时候确实是执行created-> mounted-> activated,退出时触发deactivated的,为什么回来A执行了created-> mounted-> activated,求解

回复
阅读 13.6k
7 个回答
兵兵
  • 3
新手上路,请多包涵

A页面,于B页面如果不在一个router-view组件中将再次触发mounted钩子。还有就是v-if的keep-alive,两个组件的缓存状态不一致时,也会造成重新触发mounted钩子。

vue是单页面,路由只是控制元素的显隐,所以不存在缓存。
meta只是一个可以读取的对象而已,不是设置http链接的。
路由切换旧的路由组件必定会destroy。
如果想只执行一次这个钩子可以判断这个页面时候进来过,如果已经访问过就不执行。

按道理说,组件设置了keep-alive后,再次进入的时候,就不会执行mounted钩子函数了,我也遇到了相同的问题,后来使用beforeRouteEnter路由守卫,来判断进入的路由路径做不同操作了

是滴,我也遇到了 keep-alive 不起作用的情况,在.vue 文件中加入 name 不知道有没有用

董文治
  • 2
新手上路,请多包涵
<keep-alive>
   <router-view v-if="$route.meta.keepAlive\">
</keep-alive>
<router-view v-if="!$route.meta.keepAlive\">

应该是这个写法吧。v-if加到<router-view>上,而不是<keep-alive>上。要不然,keep-alive就被干掉了,谁负责缓存嘞。

宣传栏