VUE ルーティング ナビゲーション (ルーティング インターセプト ログイン、権限、ジャンプ制限)。VUE ライフサイクル: beforeRouteLeave

要件: ユーザーが編集した後、プールにデータがある場合は、ページを離れるときに保存するように求められます。
ページは戻るだけでなく他のページに移動するため、戻るボタンにロジックを記述するだけでは要件を満たせません。ルーティングナビゲーションでそれが可能：
公式ドキュメント
リファレンス

router.beforeEach((to, from, next) => {
    
    
  console.log(to);   // 即将要进入路由的对象
  console.log(from); // 当前导航要离开的路由对象
  console.log(next); // 调用next该方法，才能进入下一个路由
  next();
});

コード例: ルーターのルートファイル

import {
    
    MessageBox} from 'element-ui'
import store from '../store/index'
import Router from 'vue-router'
//..............
const router = new Router({
    
    ......})
//..............
router.beforeEach((to, from, next) => {
    
    
  let fromPath = from.fullPath==='/vocabulary/create'||from.fullPath==='/vocabulary/edit'
  let toPath = to.fullPath!='/vocabulary/create'&&to.fullPath!='/vocabulary/edit'
  let editTF = store.state.vocabulary.checkedList.length;
  // 来自这俩路由 去的不是这俩路由 且有编辑内容
  if(editTF&&fromPath&&toPath){
    
    
      MessageBox.confirm('您有编辑内容尚未保存，确认退出？', '提示', {
    
    
          confirmButtonText: '确定',
          type: 'warning',
          center: true,
      }).then(() => {
    
    
          store.commit(`vocabulary/coverCheckedList`,[]);
          next();
      }).catch(() => {
    
    
//         // next(false);
//         // router.replace(to.fullPath);
//         // router.push(to.fullPath)
//           // next(from.fullPath);
//           // abort();
        // router.back();
      });
    } else {
    
    
      store.commit(`vocabulary/setSearchModel`,{
    
    });
      store.commit(`vocabulary/setSearchModel_Page`,{
    
    });
      store.commit(`vocabulary/setCurTab`,true);
      next();
    } 
 })

ただし、私のニーズの特殊性により、これによりユーザーが [キャンセル] をクリックして無限ループに入る可能性があり、多くの方法が試みられましたが無駄でした。
そこで、VUE のライフサイクルを見つける別の方法を見つけました。 beforeRouteLeave

    beforeRouteLeave(to,from,next){
    
    
        let fromPath = from.fullPath==='/vocabulary/create'||from.fullPath==='/vocabulary/edit'
        let toPath = to.fullPath!='/vocabulary/create'&&to.fullPath!='/vocabulary/edit'
        let editTF = this.$store.state.vocabulary.checkedList.length;
        // 来自这俩路由 去的不是这俩路由 且有编辑内容
        if(editTF&&fromPath&&toPath){
    
    
            this.$confirm('您有编辑内容尚未保存，确认退出？', '提示', {
    
    
                confirmButtonText: '确定',
                type: 'warning',
                center: true,
            }).then(() => {
    
    
                this.$store.commit(`vocabulary/coverCheckedList`,[]);
                next();
            }).catch(() => {
    
    
                return
            });
        } else {
    
    
            this.$store.commit(`vocabulary/setSearchModel`,{
    
    });
            this.$store.commit(`vocabulary/setSearchModel_Page`,{
    
    });
            this.$store.commit(`vocabulary/setCurTab`,true);
            next();
        } 
    }

ニーズに対する完璧なソリューション~