Keep-Alive 配合 router-view 不生效问题

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

我的管理端框架用的是若依,添加菜单配置了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',
  ...
}
### Vue.js 中 `router-view` 和 `keep-alive` 的组合使用 为了提高用户体验并优化性能,在 Vue.js 应用程序中可以利用 `<keep-alive>` 组件来缓存路由组件实例,从而减少重复渲染的时间开销。 #### 基本语法结构 当希望某些页面在切换时不重新加载数据或保持状态时,可以在包裹 `<router-view>` 的地方加入 `<keep-alive>`: ```vue <template> <div id="app"> <!-- 使用 include 属性指定要缓存的组件 --> <keep-alive :include="cachedComponents"> <router-view /> </keep-alive> </div> </template> <script> export default { data() { return { cachedComponents: ['Home', 'About'] // 定义需要被缓存的具体组件名称列表 } }, } </script> ``` 上述代码片段展示了如何通过设置 `include` 属性来精确控制哪些组件应该被缓存[^1]。这有助于开发者灵活管理不同场景下的缓存策略。 #### 动态调整缓存逻辑 除了静态定义外,还可以基于业务需求动态改变 `cachedComponents` 数组的内容,以便更精细地掌控何时启用缓存机制以及针对哪些特定路径生效。 例如,可以通过监听导航事件或其他条件变化实时更新此数组,进而影响实际应用中的缓存行为。 #### 实际案例分析 假设存在一个多标签页的应用界面设计,其中每个选项卡对应着不同的子模块(即独立的视图)。此时就可以借助于 `<keep-alive>` 来确保用户离开后再返回某个标签页时不会丢失之前的操作记录或是重置表单填写进度等问题发生。 对于频繁交互且涉及大量DOM操作或者异步请求获取资源的情况来说,合理运用该特性能够显著提升整体流畅度与响应速度。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

EngineZhang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值