ルートジャンプデモ要素が破壊されない問題（インターセプトにvueルーティングを使用）

アプリケーションシナリオ:

Runtime-dom.esm-bundler.js:10 Uncaught (in Promise) TypeError: Cannot read property of null (read '×××') は、 vue の終了監視のライフサイクル機能が動作しない場合、ジャンプルートで発生します。 vue-router のルート インターセプトを使用して操作を実行できます。

発生する可能性のある問題:ルートがジャンプするとき、現在のページに破棄されていない要素がある場合、他のページにジャンプするときにエラーが発生します。コンソールを開くと、基本的に属性が見つからないタイプが表示されます。これは、前のページの要素が破壊されずに他のページに持ち込まれてしまい、問題が発生した状態です。elementuiを使用する際にドロワーを使用する際にこの問題に遭遇しました 最初は簡単に解決できると感じていましたが壊れていないのでは? vue3のライフサイクル機能の使い方

onBeforeUnmount()

離れるときは、このドロワーを閉じてデータを消去してください。

しかし、それはそれほど単純ではないことがわかり、onBeforeUnmount を使用しましたが、それでもエラーが報告され、次に onUnmounted を使用したところ、関数がまだ破棄されていないことがわかりました。

このときvue-routerメソッドが動作するので、まず現在のページにonBeforeRouteLeaveを導入します。 

import { onBeforeRouteLeave } from 'vue-router';

それから

 onBeforeRouteLeave((to, from, next) => {
    console.log('准备离开这个路由');
    isDestroyDrawer.value = true; //这个是我关闭、销毁元素,抽屉的一个操作
    next(); //跳转，如果不写next() 就不会跳转路由
  });

ジャンプルーティングページが破壊されない問題を完全に解決