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>
相关推荐
颜酱4 分钟前
理解并尝试vue3源码的reactivity
前端·javascript·vue.js
苏州第一深情12 分钟前
【uniapp】uniapp实现单点登录、打包H5部署到线上
javascript·vue.js·uni-app
拉不动的猪12 分钟前
jS篇Async await实现同步效果的原理
前端·javascript·面试
杨充17 分钟前
03.接口vs抽象类比较
前端·后端
chxii29 分钟前
2.4 组件通信
前端·javascript·vue.js
Entropy-Lee33 分钟前
JavaScript 执行上下文与作用域
开发语言·javascript·ecmascript
泡岩浆的child1 小时前
朋友:你平常都用什么软件取色?我:QQ截图啊。朋友:牛X!
前端
老周聊大模型1 小时前
AI工程化必学:Spring AI与Redis的黄金组合实践
javascript·人工智能·程序员
志如1 小时前
【校招面试官说】什么样的技术人更容易被大厂校招选中?
前端·后端·面试
古夕1 小时前
TS 导出 PDF:解决表头乱码,实现表格内添加可点击链接
前端·typescript