本文实例为大家分享了vue实现页面缓存功能的具体代码,供大家参考,具体内容如下
主要利用keep-alive实现从列表页跳转到详情页,然后点击返回时,页面缓存不用重新请求资源。
一、在router里配置路由
在meta里定义页面是否需要缓存
import Vue from "vue"; import Router from "vue-router"; // 避免到当前位置的冗余导航 const originalPush = Router.prototype.push Router.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来进行缓存
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
三、点击返回按钮时调用this.$router.back()方法就可以了
// 返回 bacKBnt(){ this.$router.back() },
四、清除缓存
只针对跳转到"exhibitionWord"或"exhibitionWeekWord"页面才进行缓存,跳转其他页面不用缓存。
beforeRouteLeave(to, from, next) { if (to.name == 'exhibitionWord' || to.name == 'exhibitionWeekWord') { // 需要缓存的路由name from.meta.keepAlive = true next() }else{ from.meta.keepAlive = false next() } },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- vue移动端项目中如何实现页面缓存的示例代码
- vue页面跳转实现页面缓存操作
- Vue2.0 实现页面缓存和不缓存的方式
- vue项目强制清除页面缓存的例子
- vuex + keep-alive实现tab标签页面缓存功能
- vue服务端渲染页面缓存和组件缓存的实例详解
- Vue项目全局配置页面缓存之按需读取缓存的实现详解
- 详解基于vue的移动web app页面缓存解决方案
- 详解vue之页面缓存问题(基于2.0)
本文由 华域联盟 原创撰写:华域联盟 » vue实现页面缓存功能
转载请保留出处和原文链接:https://www.cnhackhy.com/84076.htm