如圖，最近在做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