Vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュについて

// 変数フラグが true の場合、comp-a コンポーネントが表示され、そうでない場合は comp-b コンポーネントが表示されます <comp-a v-if="flag"></comp-a>

<comp-b v-else></comp-b>

// クリックするとログイン、登録、終了コンポーネントが切り替わります <template>
     <div>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">ログイン</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">登録</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">ログアウト</a>
        
        // <component></component> は対応する名前のコンポーネントを表示します。これはプレースホルダーに相当します // :is 属性はコンポーネント名を指定します <component :is="comName"></component>
      </div>
    </テンプレート>

// ルーティングルール:
  {
    パス: '/login',
    名前: 'ログイン',
    コンポーネント: () => import('../views/login.vue')
  },
  {
    パス: '/register',
    名前: 'レジスタ',
    コンポーネント: () => import('../views/register.vue')
  },
  
  //コンポーネントを表示する場所:
   <ルータービュー />

  <テンプレート>
     <div>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">ログイン</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">登録</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">ログアウト</a>
     
     // ログイン コンポーネントがキャッシュされます。include が設定されていない場合、<component></component> にマウントされているすべてのコンポーネントがデフォルトでキャッシュされます。// 指定された複数のコンポーネントをキャッシュします include = ['login', 'register']
      <キープアライブを含める="ログイン">
          <コンポーネント:is="comName"></コンポーネント>
      </キープアライブ>    
      </div>
    </テンプレート>

 {
    パス: '/login',
    名前: 'ログイン',
    コンポーネント: () => import('../views/login.vue')
    メタ:{
        keepAlive : true // ログインコンポーネントはキャッシュされます}
  },
  {
    パス: '/register',
    名前: 'レジスタ',
    コンポーネント: () => import('../views/register.vue'),
      メタ:{
        keepAlive : false // レジスタコンポーネントはキャッシュされません}
  },

<div id="アプリ">
    <キープアライブ> 
    <!-- キャッシュする必要があるコンポーネントを表示します-->
        <router-view v-if="$route.meta.keepAlive"> </router-view>
    </キープアライブ>
    
    <!-- キャッシュを必要としないコンポーネントを表示します --> 
    <router-view v-if="!$route.meta.keepAlive"> </router-view>
</div>

 // beforeRouteLeave() フック // 詳細ページに移動するかどうかを決定する beforeRouteLeave(to, from, next) {
      to.path === "/goods_detail"の場合{
        メタキープアライブ = true;
      } それ以外 {
        from.meta.keepAlive = false;
        // this.$destroy()
      }
      次（）;
    }