vue实现页面缓存功能
作者：无月大大
这篇文章主要为大家详细介绍了vue实现页面缓存功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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()
}
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。