vue3 uses keep alive to achieve forward update and cancel and destroy

Keep alive implements forward update and cancel and destroy

To achieve forward update and cancellation, the core is to operate keep-alive include.
The specific method is to save the page name when entering a new page, and delete the name after it when entering again.

Specific implementation ideas:

Normally, the page moves forward linearly:

A->B->C->D

include array data [A,B,C,D]

When entering C again, it is considered that D returns to C

include array data [A,B,C]

Page D is destroyed, thus the return is destroyed

Save include array using vuex

const keep = {
    namespaced: true,
    state: () => {
        return {
            include: [],
        }
    },
    getters: {
        include(state) {
            return 
        },
    },
    mutations: {
        add(state, name) {
            let b = false
            let i = 0
            for (; i < ; ++i) {
                let e = [i]
                if (e == name) {
                    b = true
                    break
                }
            }
            if (!b) {
                (name)
            } else {
                (i + 1)
            }
        }
    },
    actions: {
    }
}
export default keep

Add name in beforeEach

import store from "../store"
((to, from,next) =&gt; {
// The page name should be the same as the route name  ("keep/add", )
  next()
})

include

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="includeList">
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>
<script>
export default {
  computed: {
    includeList() {
      return this.$["keep/include"].join(",");
    },
  },
};
</script>

Of course, there are also situations where pages are looped, usually detailed pages

A->A->A->A or A->B->C->A->B->C

In this case, if you do not need to save the page, use wacth to monitor the $route changes and request the interface again

If you need to save the page, add a new route with dynamic route addRoute

A1->A2->A3->A4

import time from "../views/time"
function copyObj(obj) {
    if (typeof obj == "object") {
        if ((obj)) {
            let arr = [];
            for (let item of obj) {
                ((copyObj(item)));
            }
            return arr;
        } else if (obj == null) {
            return null;
        } else {
            let obj1 = {};
            for (let index in obj) {
                obj1[index] = copyObj((obj[index]));
            }
            return obj1;
        }
    } else if (typeof obj == "function") {
        return (obj);
    } else if (typeof obj == undefined) {
        return undefined;
    } else {
        return obj;
    }
}
 = function () {
    let t = new Date().getTime();
    let path = `/time/${t}`;
    // Deep copy component    time = copyObj(time)
    // component name should be the same as route name     = path
    this.$({
        path,
        name: path,
        component: time,
    });
    this.$({
        path,
    });
}

vue-navigation is very useful for vue2

The above is the detailed content of vue3 using keep alive to achieve forward update and cancellation. For more information about vue3 keep alive update and destroy, please follow my other related articles!