vue框架怎么实现页面缓存和清除缓存的功能-群英

上一篇：vue框架下组件间通信的方式有多少，操作是什么下一篇：slot插槽的使用场景有哪些，用法是怎样的

这篇文章给大家分享的是“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()
      }
    },

“vue框架怎么实现页面缓存和清除缓存的功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业技术相关的知识可以关注群英网络网站，小编每天都会为大家更新不同的知识。