Vue3中如何结合keep-alive和vue-router实现页面缓存？

本文共计921个文字，预计阅读时间需要4分钟。

目录+前言+代码+一、为什么要使用keep-alive？+二、Vue2中使用keep-alive+三、Vue3中使用keep-alive+四、keep-alive属性include、exclude的使用+前言+keep-alive+Vue内置的一个组件，可以包裹被包含的组件，使其在组件切换时保持状态，避免重新渲染。

目录

• 前言
• 代码
• 一、为何要使用keep-alive？
• 二、vue2中使用keep-alive
• 三、vue3中使用keep-alive
• 四、keep-alive属性“include，exclude”的使用

前言

• keep-alive：Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
• router-view：vue-router内置组件， 如果直接包含在keep-alive里面，所有路径匹配到的组件都会被缓存。