vue页面缓存解决方案

小山丘2022

已于 2022-12-03 19:41:44 修改

阅读量4.3k

点赞数

分类专栏： vue 文章标签：前端 html

于 2022-11-30 17:08:03 首次发布

本文链接：https://blog.csdn.net/qq_39598825/article/details/128118256

版权

vue 专栏收录该内容

8 篇文章 0 订阅 ¥19.90 ¥99.00

订阅专栏

本文探讨了Vue页面缓存的四种解决方案。方案一利用keep-alive和v-if，但存在关闭后仍有缓存的问题；方案二修正了这个问题，通过在路由元信息中设置keepAlive并监听组件状态；方案三利用keepAlive的内置属性，配置较为复杂；方案四推荐使用第三方插件，配置简便。

摘要由CSDN通过智能技术生成

关于vue页面通过解决方案

方案一：使用keep-alive和v-if （备注：这种方案有问题，关闭面板后，在通过菜单打开页面还是有缓存）

1、添加keep-alive

<keep-alive>
          <router-view class="um-view" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view class="um-view" v-if="!$route.meta.keepAlive" /> 
</keep-alive>

2、在路由中添加缓存字段

		path:'XXx',
        name:'XXXX',
        component: () => import('.XXX'),
        meta: {
          title:'XXX',
          keepAlive: true
        }