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

南瓜骨头2023-11-04 18:01

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>