vue implements page caching function

This article has shared the specific code for vue to implement page caching function for your reference. The specific content is as follows

Mainly using keep-alive to jump from the list page to the details page, and then click Return, the page cache does not need to re-request resources.

1. Configure routing in router

Define whether the page needs to be cached in meta

import Vue from "vue";
import Router from "vue-router";

// Avoid redundant navigation to the current locationconst originalPush = 
 = function push(location) {
   return (this, location).catch(err =&gt; err)
}

(Router);
export default new Router({
  base: '',
  routes: [{
      path: "/",
      name: "index",
      component: () =&gt; import("@/layout"),
      redirect: '/login',
      children: [
        {
          path: 'dutySheet',
          name: 'dutySheet',
          component: () =&gt; import("@/pages/Dashboard/DutySheet")
        },
        {
          path: 'searchWord',
          name: 'searchWord',
          component: () =&gt; import("@/pages/dailyReportManage/searchWord/index"),
          meta: {
            keepAlive: true // Requires cached page          }
        },
        // Match maintenance        {
          path: "troopAction",
          name: "troopAction",
          component: () =&gt; import("@/pages/Dashboard/TroopAction"),
          meta: {
            keepAlive: false// No cache required          }
     },
      ]
    },
  ]
});

2. Configuration

Use keep-alive to cache

<keep-alive>
    <router-view v-if="$"></router-view>
</keep-alive>
<router-view v-if="!$"></router-view>

3. Just call this.$() method when clicking the return button

// return      bacKBnt(){
        this.$()
      },

4. Clear cache

Cache is only for pages that jump to "exhibitionWord" or "exhibitionWeekWord" and no cache is required when jumping to other pages.

beforeRouteLeave(to, from, next) {
      if ( == 'exhibitionWord' ||  == 'exhibitionWeekWord') { // The route name that needs to be cached           = true
          next()
        }else{
           = false
          next()
      }
    },

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.