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>