vue -- 按需加載Tabs,重新渲染公共組件（給router-view 組件的 綁定 key 的原因）

如圖，最近在做Tabs切換，發現一進來渲染所有Tabs組件時頁面卡慢，所以我選擇用切換子路由的方式來按需加載子組件的內容

<template>
  <div>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="users" label="用戶管理">   
        </el-tab-pane>
        <el-tab-pane name="peizhi" label="配置管理">
        </el-tab-pane>
        <el-tab-pane name="payment" label="角色管理">
        </el-tab-pane>
        <el-tab-pane name="plan" label="定時任務補償">
        </el-tab-pane>
    </el-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "item",
  data() {
      return {
        activeName: 'users'
      };
  },
  mounted(){ let url = this.$route.fullPath;
    let index = url.lastIndexOf("\/");
    let str = url.substring(index + 1,url.length);
    console.log(str,666);
    this.activeName = str; },
  methods: {
    handleClick(tab, event) {
      this.$router.push('/item/manage/'+tab.name)
    }
  }
  
}
</script>

問題：然而刷新發現Tab欄不會被重新渲染，沒有走created，mounted，於是在外圍的Main.vue 的標簽router-view添加了key

<template>
  <div class="main-content">
    <!-- <hh-bread></hh-bread> -->
    <router-view :key="key" class="router-view" />
  </div>
</template>

computed: {
    key() {
      // 組件被強制不復用,重新渲染,綁定 key 的原因
      console.log(this.$route.fullPath);
      return this.$route.fullPath
    }
  }

1. 設置 router-view 的 key 屬性值為 $route.path

從/page/1 => /page/2, 由於這兩個路由的$route.path並不一樣, 所以組件被強制不復用, 相關鈎子加載順序為:
beforeRouteUpdate => created => mounted

從/page?id=1 => /page?id=2, 由於這兩個路由的$route.path一樣, 所以和沒設置 key 屬性一樣, 會復用組件, 相關鈎子加載順序為:
beforeRouteUpdate

2. 設置 router-view 的 key 屬性值為 $route.fullPath

從/page/1 => /page/2, 由於這兩個路由的$route.fullPath並不一樣, 所以組件被強制不復用, 相關鈎子加載順序為:
beforeRouteUpdate => created => mounted

從/page?id=1 => /page?id=2, 由於這兩個路由的$route.fullPath並不一樣, 所以組件被強制不復用, 相關鈎子加載順序為:
beforeRouteUpdate => created => mounted