vue路由缓存

vue路由缓存

在业务场景中有时候需要页面缓存不清空,那么就需要保留缓存(include为需要缓存,而exclude为不缓存,且优先级大于include)

<KeepAlive> 是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。

<router-view v-if="!$route.meta.keepAlive"></router-view>
<keep-alive include="页面名称">
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
export const mainRoutes = {
  path: '/home',
  name: 'home',
  redirect: {
    name: 'welcome'
  },
  component: _import(`modules/home/home`),
  children: [{
      path: '/welcome',
      name: 'welcome',
      meta: {
        title: '首页',
        keepAlive: false //不需要缓存设置为false,需要则为true
      },
      component: _import(`modules/welcome/welcome`)
    }]
}

相关推荐

  1. vue缓存

    2024-06-09 16:34:03       7 阅读
  2. Vue学习笔记-缓存组件

    2024-06-09 16:34:03       30 阅读
  3. Vue Router 动态缓存组件

    2024-06-09 16:34:03       11 阅读
  4. vue3页面缓存的一种方法

    2024-06-09 16:34:03       10 阅读
  5. vue3

    2024-06-09 16:34:03       39 阅读
  6. Vue

    2024-06-09 16:34:03       30 阅读

最近更新

  1. MySQL中的隐式转换(Implicit Conversion)

    2024-06-09 16:34:03       0 阅读
  2. 什么是内存泄漏?如何避免内存泄漏?

    2024-06-09 16:34:03       0 阅读
  3. Web前端级别要求:深入剖析技能层次与发展路径

    2024-06-09 16:34:03       0 阅读
  4. git-本地项目与git连接及上传【快速教程】

    2024-06-09 16:34:03       0 阅读
  5. “先票后款”条款的效力认定

    2024-06-09 16:34:03       0 阅读
  6. 第一章 基本指令

    2024-06-09 16:34:03       0 阅读
  7. 制作手机IOS苹果ipa应用的重签名工具

    2024-06-09 16:34:03       0 阅读

热门阅读

  1. 力扣第185题:部门工资前三高的员工

    2024-06-09 16:34:03       4 阅读
  2. 手机UI设计中的按钮状态包含哪几种

    2024-06-09 16:34:03       5 阅读
  3. 等级保护与网络安全:构建信息安全的坚实防线

    2024-06-09 16:34:03       5 阅读
  4. Haproxy 搭建 web 集群

    2024-06-09 16:34:03       4 阅读
  5. 基于单片机的电流检测装置

    2024-06-09 16:34:03       6 阅读
  6. TypeScript常见面试题第九节

    2024-06-09 16:34:03       5 阅读
  7. Docker面试整理-什么是Docker Hub?

    2024-06-09 16:34:03       5 阅读