vue路由跳转引发父组件重渲问题

vue路由跳转引发父组件重渲问题

描述： 

    在父级组件下，跳转不同的子级路由 ，$router.push 在跳转到子级路由时，同样会触发父组件的渲染。

带来的问题: 

    父级路由中有一个el-tabs ，点击不同的tab， 会动态切换下面的子级路由，在这些tabs的click时间中，
    
    会判断el-tab-pane 的 name , 以不同的name 来跳转（query || name） ,
        
    点击的一瞬间会显示tab已经切过去，但马上又会跳到初始状态。

原因： 
    
    ***路由的跳转引发了父组件的重渲，父组件重渲时将el-tabs-pane的值重置为初始值。
解决： 
  **计算属性似乎不能解决这个问题。
  
  data中的默认值设为'', 
  
  路由跳转时添加路由参数，参数为el-tab-pane的name值，
  
  
  data() {
    return {
      tabActive: ''
    }
  }
  
  ...
  ..
  .
  handelTabsChange() {
       this.$router.push({
        path: '/home/list',
        query: {
            name: tab.name
        }
       })
   };
  .
  ..
  ...
  
  组件初始化时读 this.$route.query.name ,赋值给el-tabs的v-model。
  
  created() {
    this.tabActive = this,.$route.query.name || 'one'， // 路由参数没有值就读默认值, 用于第一次的赋值
  }