Vue keepAlive组件缓存
代码修整工 人气:0不同的路由共用一个组件component，并用keepAlive实现不同的页面缓存
实现功能：使用列表页面检索的数据跳转到对应的详情页面，从详情页回到列表页能记住上次检索的数据，再次切换到详情页时能正常取到对应的数据
实现方式使用Vue keepAlive实现页面缓存，整理了一些资料和其他的博客在这里记录一下。。。。
keepAlive原理：
1，保留组件的状态，在重新进入页面时避免重新渲染。
2、是抽象组件，它自身不会渲染DOM元素，也不会出现在父组件链中。
3、当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
实现
在app.vue中改写router-view
<keep-alive :include="cachedViews" :exclude="disCachedViews">
<router-view/>
</keep-alive>注意 cachedViews里面存的是由路由name构成的数组，数组的name需与组件的name一致，否词不能达到缓存的效果。
因为这里用的是动态路由，组件的name不能根据路由动态更改，所以用另外一种方式
<keep-alive>
<router-view v-if="$route.meta.keepAlive" >
<!-- 这里是会被缓存的视图组件 -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" >
<!-- 这里是不被缓存的视图组件 -->
</router-view>在构建路由时路由元信息meta加上属性keepAlive，为true
这里已经实现了页面缓存的效果，及第一个功能检索的列表页面list.vue进入到详情i页nfo.vue，再切换回到list.vue可以看到已检索的数据列表。
2.打开一个新的详情页，发现数据是上一次打开的页面数据，数据并没有根据路由刷新
因为我们这里做了keepAlive缓存，重新进入页面并不会触发created方法，而且详情页info.vue做了多路由复用同一个组件的情况，不能使用activated（）去触发。
解决这个问题必须解决路由复用问题，使用Vue-router做项目时，会遇到如/info/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view
1.方法一：通过 watch 监听路由
watch: {
'$route'(to, from) {
if (to.path !== from.path) {
console.log('检测到路由变化')
// 初始化数据
this.initData()
}
}
},2.方法二：用 :key 来阻止“复用”
设置key为$route.fullPath之后，由于两个路由的fullPath不同，组件会被强制不复用
<keep-alive>
<router-view v-if="$route.meta.keepAlive" :key="$route.fullPath">
<!-- 这里是会被缓存的视图组件 -->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath">
<!-- 这里是不被缓存的视图组件 -->
</router-view>3.方法三：通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}经过实践，方法二是比较好用的
加载全部内容