Vue知识点：缓存路由组件

阿夏呀

已于 2023-03-16 10:14:24 修改

阅读量169

点赞数

文章标签： vue.js javascript 前端

于 2023-03-15 17:00:27 首次发布

本文链接：https://blog.csdn.net/summer_cloudy/article/details/129560695

版权

文章讲述了在Vue.js应用中，如何使用<keep-alive>组件来缓存News和Message等路由组件，避免在切换路由时被销毁。通过设置<keep-alive>的include属性，可以指定需要缓存的组件名，确保这些组件在不展示时依然保持挂载状态。

摘要由CSDN通过智能技术生成

1. 作用: 让不展示的路由组件保持挂载，不被销毁
2. 具体编码

//News.vue
<template>
   <ul>
      <li>news001 <input type="text"/></li>
      <li>news002 <input type="text"/></li>
      <li>news003 <input type="text"/></li>
   </ul>
</template>

<script>
   export default {
      name: 'News',
      beforeDestroy(){
         console.log('News组件即将被销毁了')
      }
   }
</script>

//Home.vue
<template>
   <div>
      <h2>home组件内容</h2>
      <div>
         <ul class="nav nav-tabs">
            <li>
               <router-link 
                  class="list-group-item"
                  active-class="active" 
                  to="/home/news">
                  News
               </router-link>
            </li>
            <li>
               <router-link 
                  class="list-group-item" 
                  active-class="active" 
                  to="/home/message">
                  message
               </router-link>
            </li>
         </ul>
         
         //include值必须是组件名！！！（让哪个组件不被销毁就写哪个组件名）
         //同时须清楚知道<keep-alive>包裹的是哪个部分，不能直接在News.vue的外层包裹。

        //缓存一个路由组件
         <keep-alive include="News"> 
            <router-view></router-view>
         </keep-alive>
         //缓存多个路由组件
         <keep-alive :include=['News','Message']> 
            <router-view></router-view>
         </keep-alive>
      </div>
   </div>
</template>

<script>
   export default {
      name: 'Home',
   }
</script>