利用keep-alive 缓存需要缓存的页面
成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的颍泉网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
在app.vue中改写router-view
在router/index.js中添加路由元信息，设置需要缓存的页面
routes: [{
path: '/',
name: 'index',
component: index,
meta: {
keepAlive: true, //此组件需要被缓存
}
},
{
path: '/page1',
name: 'page1',
component: page1,
meta: {
keepAlive: true, //此组件需要被缓存
}
},
{
path: '/page2',
name: 'page2',
component: page2,
meta: {
keepAlive: true, // 此组件需要被缓存
}
},
{
path: '/page3',
name: 'page3',
component: page3,
meta: {
keepAlive: true, // 此组件需要被缓存
}
}
]钩子函数的执行顺序
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。我们可以利用不同的钩子函数，做不同的事。务必理解上述钩子函数的执行时机和执行顺序，本教程的核心就依赖于此钩子函数
activated和deactivated是使用keep-alive后，vue中比较重要的两个钩子函数，建议详细了解下。
在组件中，主要是在activated钩子函数中判断是否使用缓存
activated() {
//使用缓存，直接跳过
if(不需要缓存，则执行相应逻辑){
}
},
文末 分享一些技术学习视频资料：https://pan.baidu.com/s/13dbR69NLIEyP1tQyRTl4xw