keep-alive失效的原因

keep-alive失效的原因

  最近项目中有用到keep-alive，但是一直不起作用，后来上网找了很多资料才发现问题，2个原因。

1、name的使用

在vue2.1.0后keep-alive里面多了一个属性include（保存的页面name）和exclude（不保存的页面name）

// 全部缓存
<keep-alive>
	<router-view />
<keep-alive>
// 部分缓存一个页面name是‘user’
<keep-alive include='user'>
	<router-view />
<keep-alive>

其中关键是name的名字是写在页面里面的，不是路由里面（当然两者一致最好）

export default {
  name: 'user',
 }

2、多重嵌套

这个是大坑，如果项目中有多重嵌套的话，每个嵌套里面都要加keep-alive，少一个都不行，引用也算，我的项目就是嵌套了3层。

// 最里面appmain.vue
<keep-alive>
	<router-view />
<keep-alive>
// 外面home.vue
import AppMain form appmain.vue
components :{
AppMain
}
<keep-alive>
	<app-main />
<keep-alive>