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