keep-alive相关用法及使用场景

keep-alive 用法

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染

用法

<keep-alive><component><!-- 该组件将被缓存！ --></component>
</keep-alive>

使用场景

例如在A组件内多个输入框中输入信息，此时需要跳转进入B组件进行操作，再返回A组件。若没有使用 keep-alive，则A组件内输入框中的信息都会被清空，因为A组件被重新渲染。使用 keep-alive，则会保留之前输入框中的信息

props

include ，只有匹配的组件才会被缓存
exclude，任何匹配的组件都不会被缓存

// 组件 a
export default {name: 'a',data () {return {}}
}

// include
<keep-alive include="a"><component><!-- name 为 a 的组件将被缓存！ --></component>
</keep-alive>可以保留它的状态或避免重新渲染// exclude
<keep-alive exclude="a"><component><!-- 除了 name 为 a 的组件都将被缓存！ --></component>
</keep-alive>可以保留它的状态或避免重新渲染

只缓存 `router-view`中的某个组件？

使用include配合router.meta

// routes 配置
export default [{path: '/',name: 'home',component: Home,meta: {keepAlive: true // 需要被缓存}}, {path: '/:id',name: 'edit',component: Edit,meta: {keepAlive: false // 不需要被缓存}}
]

<keep-alive><router-view v-if="$route.meta.keepAlive"><!-- 这里是会被缓存的视图组件，比如 Home！ --></router-view>
</keep-alive><router-view v-if="!$route.meta.keepAlive"><!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>

拓展使用场景

假设这里有 3 个路由： A、B、C。

需求：

默认显示 A
B 跳到 A，A 不刷新
C 跳到 A，A 刷新

实现方式：

在 A 路由里面设置 meta 属性：

{path: '/',name: 'A',component: A,meta: {keepAlive: true // 需要被缓存}
}

在 B 组件里面设置 beforeRouteLeave：

export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 设置下一个路由的 metato.meta.keepAlive = true;  // 让 A 缓存，即不刷新next();}
};

在 C 组件里面设置 beforeRouteLeave：

export default {data() {return {};},methods: {},beforeRouteLeave(to, from, next) {// 设置下一个路由的 metato.meta.keepAlive = false; // 让 A 不缓存，即刷新next();}
};

这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。

部分搬运 vue-router 之 keep-alive

keep-alive相关用法及使用场景相关推荐

视频二维码的用法及应用场景说明
视频二维码的用法及应用场景说明: 1. 我没有网站,但我想把自己录的视频,生成一个二维码,以分享给朋友(不要含任何广告): 2. 我是一个小公司,自己没有视频服务器,但我想把自己的产品视频,用二维码的 ...
Java中Date各种相关用法
Java中Date各种相关用法本文主要介绍Java中Date各种相关用法. AD: Java中Date各种相关用法(一) 1.计算某一月份的最大天数 Java代码 Calendar time=C ...
【c++】14.编译proto和proto相关用法
编译proto和proto相关用法关于proto相关的知识可以参考系列博客 https://blog.csdn.net/daaikuaichuan/category_9869251.html [xx ...
$.extend 的相关用法
$.extend 的相关用法 1.1 $.extend(result,item1,item2-..) 将所有的参数项都合并result中,返回result,会破坏result的结构. 1.2 $.ex ...
boost::mpl::always相关用法的测试程序
boost::mpl::always相关用法的测试程序实现功能 C++实现代码实现功能 boost::mpl::always相关用法的测试程序 C++实现代码 #include <boost ...
boost::mpl::advance相关用法的测试程序
boost::mpl::advance相关用法的测试程序实现功能 C++实现代码实现功能 boost::mpl::advance相关用法的测试程序 C++实现代码 #include <boo ...
boost::mpl::aux::template_arity相关用法的测试程序
boost::mpl::aux::template_arity相关用法的测试程序实现功能 C++实现代码实现功能 boost::mpl::aux::template_arity相关用法的测试程序 ...
boost::mpl::aux::msvc_is_class相关用法的测试程序
boost::mpl::aux::msvc_is_class相关用法的测试程序实现功能 C++实现代码实现功能 boost::mpl::aux::msvc_is_class相关用法的测试程序 C+ ...
boost::mpl::aux::largest_int相关用法的测试程序
boost::mpl::aux::largest_int相关用法的测试程序实现功能 C++实现代码实现功能 boost::mpl::aux::largest_int相关用法的测试程序 C++实现代 ...

keep-alive相关用法及使用场景

keep-alive 用法

使用场景

props

只缓存 `router-view`中的某个组件？

拓展使用场景

keep-alive相关用法及使用场景相关推荐

最新文章

热门文章

keep-alive相关用法及使用场景

keep-alive 用法

使用场景

props

只缓存 router-view中的某个组件 ？

拓展使用场景

keep-alive相关用法及使用场景相关推荐

最新文章

热门文章

只缓存 `router-view`中的某个组件？