vue实现页面缓存功能 vue实现页面缓存功能

本文实例为大家分享了vue实现页面缓存功能的具体代码，供大家参考，具体内容如下
主要利用keep-alive实现从列表页跳转到详情页，然后点击返回时，页面缓存不用重新请求资源。
一、在router里配置路由
在meta里定义页面是否需要缓存

import Vue from "vue"; import Router from "vue-router"; // 避免到当前位置的冗余导航const originalPush = Router.prototype.pushRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch(err => err)}Vue.use(Router); export default new Router({base: '',routes: [{path: "/",name: "index",component: () => import("@/layout"),redirect: '/login',children: [{path: 'dutySheet',name: 'dutySheet',component: () => import("@/pages/Dashboard/DutySheet")},{path: 'searchWord',name: 'searchWord',component: () => import("@/pages/dailyReportManage/searchWord/index"),meta: {keepAlive: true // 需要缓存页面}},// 匹配维护{path: "troopAction",name: "troopAction",component: () => import("@/pages/Dashboard/TroopAction"),meta: {keepAlive: false//不需要缓存}},]},]});

二、配置APP.vue
使用keep-alive来进行缓存

三、点击返回按钮时调用this.$router.back()方法就可以了

// 返回bacKBnt(){this.$router.back()},

四、清除缓存
只针对跳转到"exhibitionWord"或"exhibitionWeekWord"页面才进行缓存，跳转其他页面不用缓存。

beforeRouteLeave(to, from, next) {if (to.name == 'exhibitionWord' || to.name == 'exhibitionWeekWord') { // 需要缓存的路由namefrom.meta.keepAlive = truenext()}else{from.meta.keepAlive = falsenext()}},

【vue实现页面缓存功能】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。