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>
    
  • 相关阅读:
    C语言基础知识-程序流程结构
    C语言基础知识-运算符与表达式
    Cloudera Certified Associate Administrator案例之Configure篇
    Python入门篇-文件操作
    gif软件(ShareX)
    BareTail(日志查看工具)
    [UGUI]游戏中的Tips贴图标边缘显示(贴边)
    Lua中的#
    ugui SetParent在安卓上一个诡异bug
    .svn文件夹特别大
  • 原文地址:https://www.cnblogs.com/codebook/p/15163661.html
Copyright © 2011-2022 走看看