vue切换tab更新路由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>