Vue路由组件的缓存keep-alive和include属性

Vue路由组件的缓存keep-alive和include属性

  • 功能:浏览器页面在进行切换时,原有的路由组件会被销毁。通过缓存可以保存被切换的路由组件。
    • 例子:在页面上填好的信息当进行页面切换再转回原来的页面时,原本信息被清空了需要重新填写

keep-alive和include属性的搭配使用

  • 功能:切换路由时,保留被切换路由组件。
  • 格式:
    • <keep-alive> <router-view/> <keep-alive>
      • 功能:保存所有路由组件
    • <keep-alive include="组件名称"> <router-view/> <keep-alive>
      • 功能:保存include指定的组件,数组形式可保存多个
javascript 复制代码
<template>
    <div>
        <div>
            <ul>
                <li><router-link to="/A">A1 Router-Link</router-link></li>
                <li><router-link to="/B">B1 Router-Link</router-link></li>
            </ul>
        </div>
        
        // 保存所有路由组件
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
        
        // 保存include指定的组件,可保存多个
        <keep-alive :include="['A', 'B']">
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
    export default {
        name : 'App'
    }
</script>
相关推荐
秋名山大前端2 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug2 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn2 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636023 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4163 小时前
HTML(面试)
前端
excel3 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴3 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy3 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者3 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王3 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html