惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Hugging Face - Blog
Hugging Face - Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
人人都是产品经理
人人都是产品经理
Microsoft Azure Blog
Microsoft Azure Blog
Engineering at Meta
Engineering at Meta
B
Blog RSS Feed
大猫的无限游戏
大猫的无限游戏
博客园_首页
雷峰网
雷峰网
V
Visual Studio Blog
爱范儿
爱范儿
A
About on SuperTechFans
量子位
N
Netflix TechBlog - Medium
Microsoft Security Blog
Microsoft Security Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
MongoDB | Blog
MongoDB | Blog
U
Unit 42
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
月光博客
月光博客
S
SegmentFault 最新的问题
J
Java Code Geeks
H
Hackread – Cybersecurity News, Data Breaches, AI and More

博客园 - sunwugang

026.数据库Sqlserver解决远程连接问题 C# SqlSuger C# DataTableToList 批处理自动删除指定文件夹中的文件夹以及文件 C# 开机自启动批处理bat文件 C# 将exe可执行程序设置为开机自启动 025.数据库下载&win10安装注意事项 024 数据库信息查询 + 连接串配置 C# Json操作 C# TextBox 新增文本并定位光标 C# base64转pdf + 上传至指定url C# 猜字谜 C# 闲来笔记 StringHelper--字符串左右添加指定字符 Vue学习笔记72--element ui Vue学习笔记71--histroy模式+hash模式 Vue学习笔记70--全局前置-路由守卫 + 后置路由守卫 + 独享守卫 + 组件内守卫 Vue学习笔记69--activated + deactivated Vue学习笔记67--编程式路由导航
Vue学习笔记68--缓存路由组件
sunwugang · 2024-04-01 · via 博客园 - sunwugang

缓存路由组件

  1.  作用:让不展示的路由组件保持挂载、不被销毁(eg:常用于,缓存录入的数据)
  2. 具体实现:
    <!-- include="News" 组件名,如果不添加配置,则缓存router-view中展示的组件 -->
    <keep-alive include="News">
        <router-view></router-view>
    </keep-alive>

     注:当需控制多个组件被缓存时,则需要使用数组形式==》<keep-alive :include="['News','Message']">.......

示例如下:

 1 <template>
 2   <div>
 3     <h3>home page</h3>
 4     <div>
 5       <ul class="nav nav-tabs">
 6         <li style="margin: 10px;"><router-link to="/home/News">News</router-link></li>
 7         <li style="margin: 10px;"><router-link to="/home/Message">Message</router-link></li>
 8       </ul>
 9 
10       <!-- include="News" 组件名,如果不添加配置,则缓存router-view中展示的组件 -->
11       <keep-alive include="News">
12         <router-view></router-view>
13       </keep-alive>
14 
15     </div>
16   </div>
17 </template>
18 
19 <script>
20 export default {
21   name: 'Home',
22 
23 }
24 </script>
25 
26 <style>
27 </style>