1. Determine the version
Because according to the official vue documentation, the “include” and “exclude” attributes were added in version 2.1.0
"vue": "2.6.10"
2. Make sure that the value of the “name” attribute of the vue file is the same as the attribute added to “include” and “exclude”
// page.vue 文件的script 模块export default { name: "page", ...}
<!-- 第一种写法使用逗号拼接想要缓存的页面的name 值--><keep-alive include="page,page1,..."> <router-view></router-view></keep-alive> <!-- 第二种写法使用正则表达式(使用`v-bind`)匹配想要缓存的页面的name 值--><keep-alive :include="/^page.*/"> <router-view></router-view></keep-alive> <!-- 第三种写法使用数组保存想要缓存的页面的name 值--><keep-alive include="['page', 'page1', ...]"> <router-view></router-view></keep-alive>
3. If the above two conditions are met but the include attribute still does not take effect, it is probably because there are more than two levels of nesting in your project
Use the include attribute for such multi-nested pages, and add the include attribute to each level of keep-alive
<!-- 一级router-view page的父级的父级页面--><keep-alive include="page,page1,..."> <router-view></router-view></keep-alive> <!-- 二级router-view page的父级页面--><keep-alive include="page,page1,..."> <router-view></router-view></keep-alive> <!-- 三级router-view page页面--><keep-alive include="page,page1,..."> <router-view></router-view></keep-alive>
Reprinted in: https://blog.csdn.net/Jeason_KK/article/details/123663766
This article is reprinted from https://www.wujingquan.com/posts/9237514c.html
This site is for inclusion only, and the copyright belongs to the original author.