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',
  ...
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue3中的Router-View Keep-Alive是一个非常实用且强大的功能。在Vue3中,Router-View Keep-Alive用于在Vue3应用中缓存组件实例,从而避免了不必要的渲染和加载。当我们在Vue3程序中使用Keep-Alive标签时,就可以在缓存组件渲染之前将组件实例保留在内存中。这就意味着当我们再次访问同一组件时,不必重新创建组件实例,从而节省了不必要的性能开销。 在Vue3的Router-View Keep-Alive中,缓存策略有两种:全局缓存和局部缓存。全局缓存是指整个应用程序中的所有组件都经过缓存,而局部缓存是指仅将所需组件进行缓存。对于需要局部缓存的组件,可以使用keep-alive标记进行标记。 Vue3的Router-View Keep-Alive还有另一个非常实用的功能,即通过keep-alive组件传递属性。通过keep-alive组件能够将属性传递给被缓存的组件,并且在缓存期间能够保留原属性的状态。这样可以保证在组件再次被激活时,能够保留原有的属性状态。 总之,在Vue3应用程序中,Router-View Keep-Alive是非常实用的功能,并且能够大大提高系统性能。通过使用Router-View Keep-Alive,我们可以将应用程序中的组件缓存起来,从而避免不必要的渲染和加载。此外,还能够通过keep-alive组件传递属性,保留原有属性状态,从而提高组件的可重用性。因此,尽管这不是Vue3中最醒目的功能之一,但它确实非常重要,对于Vue3应用程序的性能和可维护性都具有重要意义。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

EngineZhang

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

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

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

打赏作者

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

抵扣说明:

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

余额充值