beforeRouteEnter,进入这个组件pageAList之前，在excludeComponents移除当前组件，也就是缓存当前组件，所以任何路由跳转到这个组件，这个组件其实都是被缓存的，都会触发activated钩子
beforeRouteLeave： 离开当前页面，如果跳转到pageADetail,那么就需要在excludeComponents移除当前组件pageAList，也就是缓存当前组件，如果是跳转到其他页面，就需要把pageAList添加进去excludeComponents，也就是不缓存当前组件
获取数据的方法getVideoList在mounted或者created钩子里面调取，如果二级路由更改数据，一级路由需要更新，那么就需要在activated钩子里再获取一次数据，我们这个详情可以收藏，改变列表的状态，所以这两个钩子都使用了
6. 二级组件
对于需要缓存的一级路由的二级路由组件pageADetail，添加beforeRouteLeave路由生命周期钩子
在这个beforeRouteLeave钩子里面，需要先清除一级组件的缓存状态，如果跳转路由匹配到一级组件，再缓存一级组件
beforeRouteLeave (to, from, next) { let componentName = '' // 离开详情页时,将pageAList添加到exludeComponents里，也就是将需要缓存的页面pageAList置为不缓存状态 let list = ['pageAList'] this.$store.commit('addExcludeComponent', list) // 缓存组件路由名称到组件name的映射 let map = new Map([['pageAList', 'pageAList']]) componentName = map.get(to.name) || '' // 如果离开的时候跳转的路由是pageAList，将pageAList从exludeComponents里面移除，也就是要缓存pageAList this.$store.commit('removeExcludeComponent', componentName) next() }
7.实现方法总结
进入了pageAList，就在beforeRouteEnter里缓存了它，离开当前组件的时候有两种情况：
1 跳转进去pageADetail，在pageAList的beforeRouteLeave钩子里面缓存pageAList，从pageADetail离开的时候，也有两种情况
(1) 回到pageAList，那么在pageADetail的beforeRouteLeave钩子里面缓存了pageAList，所以这就是从pageAList-pageADetail-pageAList的时候，pageAList可以被缓存，还是之前的页码状态
(2) 进入其他路由，在pageADetail的beforeRouteLeave钩子里面清除了pageAList的缓存
2 跳转到非pageADetail的页面，在pageAList的beforeRouteLeave钩子里面清除pageAList的缓存
方案评估
自认为用这个方案来实现缓存，最终的效果非常完美了
缺点：
代码有点多，缓存代码不好复用
性能问题：如果在要缓存的一级组件里面写了activated钩子，那么从非一级组件对应的二级组件进入到要缓存的一级组件的时候，会发送两次接口请求数据，mounted里面一次, activated里面一次, 所以如果想追求几行代码完美解决缓存问题的，这里就有点无能为力了
项目源码
项目启动与效果演示
npm install安装项目依赖
npm run server启动后台服务器监听本地3003端口
npm run dev启动前端项目
三级缓存
上面的方法二级缓存就够了
上面我们说的是两个页面，二级缓存的问题，现在假设有三个页面，A1-A2-A3,一步步点进去，要求从A3返回到A2的时候，缓存A2，再从A2返回A1的时候，缓存A1，大家可以自己动手研究下，这里就不写了，其实就是上面的思路，留给大家研究。