[リスト——>詳細] 同じページ上で異なるコンポーネントを切り替えるとルーティングが変更されますが、データが過負荷になることはありません。

同じページで、異なるコンポーネント間を切り替えるとルーティングが変更されますが、データが過負荷になることはありません。

ルートのネスト時に発生しやすい問題：
一覧→詳細な問題：

リストと詳細が同じ親コンポーネント ビューにある場合、詳細は「サブルート」を通じて導入されます。このとき、ルート /detail/1、/detail/2 が変更されると、詳細コンポーネントのみが変更されます。一度ロードされると、再ロード中にルーティングが変更されるため、ルーティング コンポーネントはロードされません。

これは、詳細コンポーネントをキャッシュする Vue の基盤となる仮想 DOM の比較によるもので、詳細コンポーネントのライフサイクル関数が再呼び出されず、データが再初期化されません。内容: ルーティング、データの更新 ビューは変更されません、更新後に変更されます

解決策は 2 つあります。
1. 別のアプローチ: ルータービューに独立したキーを提供して、詳細コンポーネントが毎回リロードされるようにします。

<template>
  <div class="flex">
      <ul>
        <li v-for="i in 3" :key="i" @click="$router.push({
    
    
           name:'detail',
           params:{
    
    id:i}
        })">列表{
    
    {
    
     i }}</li>
      </ul>
      <div class="container">
      //key的值与路由相同，容易区分，也可以是其他随机值
        <router-view :key="$route.path"></router-view>
      </div>
  </div>
</template>

2. vue-router 公式推奨: 詳細コンポーネントで $router を監視し、すべてのビジネス コードをリスナーに記述します (利点: コンポーネントが過負荷にならず、データの部分更新が可能でパフォーマンスが高い、欠点: コードの記述が容易)混乱する）

export default {
    
    
// 详情业务
  data () {
    
    
    return {
    
    
      count: '详情页面' + this.$route.params.id
    }
  },
  created () {
    
    
    alert('create')
  },
  mounted () {
    
    
    alert('mounted')
  }
  监听路由，重载页面
  watch: {
    
    
    $route (newVal, oldVal) {
    
    
      alert(newVal.fullPath)
      this.count = '详情页面' + this.$route.params.id
      alert('create')
      alert('mounted')
    }
  }
}