keep-alive使用與銷燬

在項目裏常常會遇到如下狀況，填單頁跳轉到選擇信息頁（eg:選擇地址、選擇證件），再返回到填單頁時，填單頁信息不變。能夠使用Vue的內置的keep-alive緩存組件來實現以上功能。

1. 使用

在App.vue中加入keep-alive

<template>
    <div id="app">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
        <TabBar />
    </div>
</template>

在路由文件中，給須要緩存的頁面加上meta

{
    path: '/fillorder/:code',
    name: 'fillorder',
    component: Fillorder,
    meta: {
        keepAlive: true,
    },
},

2. 銷燬

以上操做已經能夠實現填單頁的緩存，可是頁面加載一次後變不會再從新請求數據，這並不能知足咱們的需求。咱們但願填單頁返回到上一頁再進入填單頁時頁面會從新加載。
因此，咱們首先嚐試在組件內的路由守衛，經過頁面的去向改變該頁面的keepAlive

beforeRouteLeave(to, from, next) {
    if (to.name === 'selectAddr') {
        from.meta.keepAlive = true;
    } else {
        from.meta.keepAlive = false;
    }
    next();
},

而後，再次進入頁面能夠從新加載。可是因爲頁面進入時是 keepAlive： false，因此會致使出現兩個<FillOrder>組件。但問題來了，此時跳轉選擇地址頁面再回到填單頁時，顯示的填單頁是上一次的緩存，這樣就致使顯示不正確了。

keep-alive並未提供銷燬包含組件的方法，但咱們能夠經過比較hack的方式去實現。

function removeKeepAliveCache () {
    if (this.$vnode && this.$vnode.data.keepAlive && this.$vnode.parent) {
        const tag = this.$vnode.tag;
        let caches = this.$vnode.parent.componentInstance.cache;
        let keys = this.$vnode.parent.componentInstance.keys;
        for (let [key, cache] of Object.entries(caches)) {
            if (cache.tag === tag) {
                if (keys.length > 0 && keys.includes(key)) {
                    keys.splice(keys.indexOf(key), 1);
                }
                delete caches[key];
            }
        }
    }
    this.$destroy();
};

而後，在組件裏的路由守衛調用removeKeepAliveCache，同時也不須要去修改from.meta.keepAlive了

beforeRouteLeave(to, from, next) {
    if (to.name === 'selectAddr') {
        // from.meta.keepAlive = true;
    } else {
        // from.meta.keepAlive = false;
        removeKeepAliveCache.call(this);
    }
    next();
},

至此，就實現了咱們開頭所說的需求，填單頁跳轉到選擇地址頁，再返回到填單頁時，填單頁信息不變。再次從新進入填單頁時，頁面會刷新。