Vue- 缓存路由组件

作者：张三丰无极

2023-06-09
北京
本文字数：526 字
阅读完需：约 2 分钟

缓存路由组件

缓存路由组件是一个完善路由的技巧。

作用是让不展示的路由组件保持挂载，不被销毁。

案例演示

给一个路由各一个 input 框，输入内容，当切换路由的时候 input 框里面的内容消失了，这是因为路由被销毁了

这里我切到了点了下 message，也就是切到了 messgae 组件

但是我想要保留这些数据，不希望组件被销毁

keep-alive 标签

这时候可以借助 keep-alive 标签，在要展示的组件的地方进行 keep-alive 进行修饰

这样就能完成切换路由不被销毁，但是所有的路由都被 keep-alive 标签进行缓存了

include 属性

这时候可以借助 include 属性，精准告诉路由器要缓存哪个路由，值为组件的名称

incluede 缓存多个组件

如果要缓存多个，可以使用数组的写法

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

复制代码

总结

作用：让不展示的路由组件保持挂载，不被销毁。
具体编码

<keep-alive include="News">     <router-view></router-view></keep-alive>

复制代码

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/a96fac3a5325e9a910d42ebe4】。文章转载请联系作者。

张三丰无极

关注

还未添加个人签名 2022-10-26 加入

还未添加个人简介

发布

暂无评论

创作场景