Keep-Alive 配合 router-view 不生效问题_若依keepalive无效-优快云博客

今天在开发测试过程中遇到了这样一个问题：

我的管理端框架用的是若依，添加菜单配置了KeepAlive的情况下，已经打开的页面在切换以后，页面中的输入项被清空了。一开始以为是若依的问题，于是重新去若依的测试网站上验证了一下，确认了人家是没有问题的，于是接下来去和若依的源码做了一下对比，发现使用Keep-Alive的代码也是没有区别的：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view v-if="!$route.meta.link" :key="key" />
      </keep-alive>
    </transition>
    <iframe-toggle />
  </section>
</template>

这时想起来自己对若依的一些依赖做了版本升级，vue升级到了2.7.10，难道是vue版本升级后用法变了？于是去查看vue的官方说明，并没有发现相关用法有变化的说明。

这时只能去看看是不是有其他同学也遇到了相同的问题，抱着试一试的态度去网上查，倒是有不少帖子说出现了实效的问题，但是打开以后发现大部分帖子都是重复并且没有什么价值的。。。在被重复帖子虐了N多次后，终于发现了一个不一样的。这个帖子中提到当路由名称和组件名称不同时会出现此问题。

这时想到之前由于自己的业务组件中有子级的路由命名和若依自带的路由有重复的，会提示重复的路由，于是修改了生成路由name的生成规则，在原来的基础上增加了父级路由的name以避免冲突。

经测试将命名方式改回原来的或者在Component中指定name为新的规则的名称就生效了。

export default {
  name: 'Management-Api',
  ...
}