Vue中使用keep-alive缓存页面详解-创新互联

利用keep-alive 缓存需要缓存的页面

成都创新互联公司是一家专业提供德令哈企业网站建设,专注与网站制作、网站建设、HTML5、小程序制作等业务。10年已为德令哈众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

在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

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：Vue中使用keep-alive缓存页面详解-创新互联
网页网址：http://6mz.cn/article/doeeee.html