vue学习指南：第十三篇(详细) - Vue的 路由 第三篇 ( 路由的缓存 )

路由的缓存

路由缓存是 vue组件优化的一个重要方法

为什么实现路由缓存？

　　为了 组件间 相互切换不会重复加载数据，影响用户体验，我们通常需要将组件的数组实现缓存，当我们点过来，在点的时候会再次发送 ajax，想让它发送之后把数据存起来。

　　我们需要，当我点击的时候直接出来

<keep-alive>
    <router-view></router-view>
</keep-alive>
步骤一：路由的写法
{
    path:"/find/nan",
       name:"nan",
       component:nan,
       meta:{
           keepalive:true
       }
},

 

为true 这个组件就缓存，为false 就不缓存

步骤i二：app.vue中

　　使用 <keep-alive></keep-alive> 标签将<router-view></router-view> 包裹起来。

keep-alive 是什么？

　　包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们，他自身不会渲染一个 dom 元素 也不会出现在父组件中。

 

作者：晋飞翔
手机号(微信同步)：17812718961
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢！！！