zoukankan      html  css  js  c++  java
  • tab切换vue中created方法执行两次

    问题描述

    element-admin中使用tab切换到不同的路由,发现每次切换tab路由都会执行两次生命周期

    <tabs
        :tabs="tabs"
        v-model="activeName"
        @on-switch="handleSwitch"
    >
        <components :is="activeName"></components>
    </tabs>
    

    问题分析

    Vue官网上提供了一个动态组件 <component :is="currentTabComponent"> ,可以使用is动态切换组件,切换组件后组件会立即开始一个生命周期,然后路由跟着变化了,路由变化后又引发了页面重新渲染,所以会出现created中的方法执行两次的问题。解决方法就是将动态组件放到一个<router-view>组件中,这样切换tab后就根据匹配的路由渲染页面了。

    问题解决

    使用<router-view>将动态组件包起来,这样每次切换都重新渲染一次。

    <tabs
        :tabs="tabs"
        v-model="activeName"
        @on-switch="handleSwitch"
    >
        <router-view>
        	<components :is="activeName"></components>
        </router-view>
    </tabs>
    

    备注

    <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。

    因为它也是个组件,所以可以配合 <transition><keep-alive> 使用。如果两个结合一起用,要确保在内层使用 <keep-alive>

    <transition>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
    
  • 相关阅读:
    团队冲刺二(6)
    团队冲刺二(5)
    JAVA面试中问及HIBERNATE与 MYBATIS的对比,在这里做一下总结
    解决ADB server didn't ACK问题,连上手机问题
    ADB server didn't ACK
    android错误
    Andy
    在Eclipse下搭建Android开发环境教程
    VM VirtualBox 安装 Android 4.3虚拟机完整教程
    电脑安装Android4.0虚拟机的做法
  • 原文地址:https://www.cnblogs.com/codebook/p/15163661.html
Copyright © 2011-2022 走看看