zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    CDH版本大数据集群下搭建的Hue详细启动步骤(图文详解)
    如何正确且成功破解跨平台数据库管理工具DbVisualizer?(图文详解)
    [转]【HTTP】Fiddler(二)
    [转]jQuery UI Dialog Modal Popup Yes No Confirm example in ASP.Net
    [转]artDialog
    [转]GridView排序——微软提供Sort
    [转]GridView中直接新增行、编辑和删除
    [转]asp.net的ajax以及json
    [转]JQuery Ajax 在asp.net中使用总结
    [转]Jquery easyui开启行编辑模式增删改操作
  • 原文地址:https://www.cnblogs.com/juewuzhe/p/14124779.html
Copyright © 2011-2022 走看看