Detailed explanation of vue3 cache page keep-alive and unified routing processing

Detailed explanation of vue3 cache page keep-alive and unified routing processing

1. Introduction

When using routing to jump to other pages, it is required to cache the current page. For example, when jumping from a list page to a detail page, the list content needs to be cached and the scroll bar position needs to be saved. Sometimes, some content in the page that needs to be cached is not cached. In short, there are various situations. Here are some examples.

The usage of vue2 and vue3 is different

The created() method and mounted() method are executed when the page is initialized. If the page is cached, these two methods will not be executed. Also, if the page is cached, the destroyed() method in vue2 and the unmounted() method in vue3 will not be executed.

The activated() method is executed every time you enter the page

2. Use

1. Differences between vue2 and vue3

vue2:

<template>
	<div id="nav">
	    <router-link to="/">Home</router-link> |
	    <router-link to="/about">About</router-link>
  	</div>
	<!-- vue2.x configuration -->
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
</template>

vue3:

<template>
	<div id="nav">
	    <router-link to="/">Home</router-link> |
	    <router-link to="/about">About</router-link>
  	</div>
  <!-- Vue3.0 configuration Component is fixed writing -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

Configuration in route.js:

path: '/',
name: 'Home',
component: Home,
meta:{
  keepAlive: true
}

Effect:

2. Some data on the page does not need to be cached

You can handle the logic that requires partial refresh in the activated() method

...
Data that needs to be partially refreshed: <input type="text" v-model="newStr" />
...
data() {
  return {
    newStr: "2",
  };
},
mounted() {
  console.log("mounted method executed");
  this.newStr = "3";
},
activated() {
  console.log("The actived method was executed...");
  this.newStr = "4";
}

Effect:

3. Dynamically set the keepAlive property

You can also set the keepAlive property in the vue file. It is only effective when added in the beforeRouteEnter() method, that is, add it in Home.vue when entering the page:

  // Use the guard in the component to do something with the page leaving event // to is the route to be redirected, from is the route of the previous page beforeRouteEnter(to, from, next) {
    to.meta.keepAlive = true;
    // The route continues to jump next();
  }

4. Use include and exclude to configure components that need to be cached

Configure in app.vue:

<router-view v-slot="{ Component }">
  <keep-alive include="testKA">
    <component :is="Component"/>
  </keep-alive>
</router-view>

Among them, testKA corresponds to the name of a component:

export default {
    name:'testKA', // keep-alive include attribute matches component name
    data() {return {}},
    activated() {
        // The life cycle of the keepalive cached page will be performed every time it is entered},
}

In addition, include usage is as follows:

<!-- Comma separated string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- Regular expression (using `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- Array (using `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

The usage of exclude is the same as that of include, representing components that are not cached.

5. Some pages need to be cached, and some pages need to be refreshed

Description: If there are three pages a, b, and c, when a->b, b refreshes the page, then b->c, c->b, b does not refresh the page, and then b->a, a->b, b refreshes the page.
Self-test, it can only be achieved with vuex, but the disadvantage is that the activated() method is not executed when the page is cached

6. Cache is only effective in the first-level routing

If you need to use cache in the secondary route, you can do the same configuration in the primary route

store.js code:

state: {
  keepAlives:[]
},
mutations:
  SET_KEEP_ALIVE(state,params) {
    state.keepAlives = params
  }
},
getters:{
  keepAlive:function(state){
    return state.keepAlives
  }
}

App.vue code:

<template>
  <div id="nav">
    <router-link to="/bbb">BBB</router-link> |
    <router-link to="/home">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive :include="keepAlive">
      <component :is="Component"/>
    </keep-alive>
  </router-view>
</template>
<script>
  export default{
    computed:{
      keepAlive(){
        return this.$store.getters.keepAlive
      }
    }
  }
</script>

Home.vue code:

// Use the guard in the component to do something with the page leaving event // to is the route to be redirected, from is the route of the previous page beforeRouteEnter(to, from, next) {
  next(vm=>{
    if(from.path == "/bbb"){
      vm.$store.commit("SET_KEEP_ALIVE",["Home"])
    }
  });
},
beforeRouteLeave(to, from, next) {
  if (to.path == "/about") {
    console.log("You will be redirected to the /about page...")
  } else {
    console.log("You will be redirected to a non-/about page...")
    this.$store.commit("SET_KEEP_ALIVE",[])
  }
  // The route continues to jump next();
}

Effect:

Summarize

This is the end of this article about vue3 cache page keep-alive and unified routing processing. For more relevant vue3 cache page keep-alive content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Sample code for keeping-Alive with vue-router to achieve cache page effect
  • Detailed explanation of keep-alive + vuex to make cached pages flexible
  • Vue built-in component keep-alive event dynamic cache example
  • Vue project keepAlive cooperates with vuex to dynamically set routing cache mode

<<:  Sharing some details about MySQL indexes

>>:  Analysis of the implementation method of modifying the default network segment of Docker

Recommend

Detailed explanation of Vue mixin

Table of contents Local Mixin Global Mixins Summa...

Use Docker to build a Redis master-slave replication cluster

In a cluster with master-slave replication mode, ...

MySql grouping and randomly getting one piece of data from each group

Idea: Just sort randomly first and then group. 1....

Metadata Extraction Example Analysis of MySQL and Oracle

Table of contents Preface What is metadata Refere...

JavaScript offset implements mouse coordinate acquisition and module dragging within the window

offset Offset is the offset. Using the offset ser...

jQuery implements accordion small case

This article shares the specific code of jQuery t...

Installation and usage analysis of Portainer, a visual UI management tool for Docker

Portainer is an excellent Docker graphical manage...

Use href in html to pop up a file download dialog box when clicking a link

I learned a new trick today. I didn’t know it befo...

MySQL string splitting example (string extraction without separator)

String extraction without delimiters Question Req...

In-depth analysis of the Linux kernel macro container_of

1. As mentioned above I saw this macro when I was...

Native js implements regular validation of the form (submit only after validation)

The following functions are implemented: 1. Usern...

CSS3 creates web animation to achieve bouncing ball effect

Basic preparation For this implementation, we nee...

In-depth explanation of JavaScript this keyword

Table of contents 1. Introduction 2. Understand t...

Summary of Mysql update multi-table joint update method

Next, I will create two tables and execute a seri...

Detailed tutorial on installation and configuration of compressed version of MySQL database

Table of contents 1. Download MySQL 2. Unzip the ...