Vue-router切换组件如何避免组件被销毁？

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

目录 + Vue-router 切换组件时避免组件销毁 + 1. 使用 keep-alive 包裹 router-view + 2. 定义路由 meta 字段 + 3. keep-alive 的原理 + Vue-router 路由切换 + 组件重用问题 + 问题描述 + 翻车现场再现 + 原因分析 + 前往

目录

• vue-router切换组件时使组件不销毁
• 1、用keep-alive包裹router-view
• 2、定义路由meta字段
• 3、keep-alive的原理
• vue-router路由切换 组件重用挖下的坑
• 问题描述
• 翻车现场再现
• 车祸原因分析
• 前往救援
• 一次真的救援

vue-router切换组件时使组件不销毁

默认地，使用vue-router切换组件时，离开的组件会被销毁，新进入地组件会创建。

那么，有时候，我们希望离开的组件不要被销毁。这时就需要使用到keep-alive标签来缓存组件。

1、用keep-alive包裹router-view

在router-view标签外包裹keep-alive

使用v-if来判断一下，否则所有的组件都会销毁或者不销毁。