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

Question

实现从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，求解

Answer 1

<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就被干掉了，谁负责缓存嘞。

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

兄弟 你这个问题解决了么？是通过beforeRouteEnter路由守卫 这个方法么

Answer 7

<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>

move <keep-alive> v-if tag into <router-view>
try try !!! surprised