vue3 がキープアライブを使用して前方更新と後方破棄を実現する方法

PHPz
リリース: 2023-05-23 20:19:19
転載
1939 人が閲覧しました

キープアライブは前方更新と後方破壊を実装します

前方更新と後方破壊を実現したい場合、中心となるのはキープアライブのインクルードを操作することです。
具体的な方法は、新しいページに入るときにページ名を保存し、再度入るときにそれ以降の名前を削除するというものです。

具体的な実装アイデア:

通常の状況では、ページは直線的に進みます:

A->B->C->D

include配列データ[A,B,C,D]

##Cを再度入力すると、DはC

#に戻るとみなされ、配列データ[A,B,C]

##が含まれます#D ページが破棄されるため、後方破棄が行われます

vuex を使用してインクルード配列を保存します

const keep = {
    namespaced: true,
    state: () => {
        return {
            include: [],
        }
    },
    getters: {
        include(state) {
            return state.include
        },
    },
    mutations: {
        add(state, name) {
            let b = false
            let i = 0
            for (; i < state.include.length; ++i) {
                let e = state.include[i]
                if (e == name) {
                    b = true
                    break
                }
            }
            if (!b) {
                state.include.push(name)
            } else {
                state.include.splice(i + 1)
            }
        }
    },
    actions: {
    }
}
export default keep
ログイン後にコピー

各前に名前を追加
import store from "../store"
router.beforeEach((to, from,next) => {
// 页面name要和route 的name一样
  store.commit("keep/add", to.name)
  next()
})
ログイン後にコピー
include use
<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.$store.getters["keep/include"].join(",");
    },
  },
};
</script>
ログイン後にコピー
もちろん、ページがループ内でジャンプする場合もあります。通常は詳細ページ
A->A->A->A または A->B->C- >A-> B->C

この場合、ページを保存する必要がない場合は、wacth を使用して $route の変更を監視し、インターフェイスを再要求します

ページを保存する必要がある場合は、動的ルーティング addRoute を使用して新しいルートを追加します

A1->A2->A3->A4

import time from "../views/time"
function copyObj(obj) {
    if (typeof obj == "object") {
        if (Array.isArray(obj)) {
            let arr = [];
            for (let item of obj) {
                arr.push(Object.assign(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 Object.assign(obj);
    } else if (typeof obj == undefined) {
        return undefined;
    } else {
        return obj;
    }
}
window.pushTime = function () {
    let t = new Date().getTime();
    let path = `/time/${t}`;
    // 深复制component
    time = copyObj(time)
    // component name要和route 的name一样
    time.name = path
    this.$router.addRoute({
        path,
        name: path,
        component: time,
    });
    this.$router.push({
        path,
    });
}
ログイン後にコピー

vue2 は非常に簡単に使用できますvue-navigation

以上がvue3 がキープアライブを使用して前方更新と後方破棄を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:yisu.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート