刷新后停在当前tab栏

tab栏切换不通过路由时，刷新会回到第一个tab栏，为了防止刷新回到第一个tab，需要通过路由。

路由配置：

{
   path: '/budgetShow/:name?',     //name  是一个变量，根据路由不同，path不同
   name: 'budgetShow',
   component: () => import('@/views/budgetManagement/index.vue'),
},

页面

<template>
  <div class="container">
    <el-card>
      <div slot="header" class="clearfix">
        <breadcrumb >
          <span slot="one">面包屑</span> 
        </breadcrumb>
      </div>

    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane v-for="(item,index) in tabPanes" :key="index" :label="item.label" :name="item.name"
        style="padding:10px">
        //动态组件   通过is的值渲染指定的组件   if可以实现每一个组件都重新加载（切换标签时，重新请求数据）
        <components :is="item.is" v-if="activeName===item.name"></components>
      </el-tab-pane>
    </el-tabs>

    </el-card>
  </div>
</template>

<script> 
  import expendBudget from "./expendBudget.vue"; 
  import incomeBudget from "./incomeBudget.vue"; 
  import assetsBudget from "./assetsBudget.vue"; 
  import assetsExpend from "./assetsExpend.vue"; 
  import laborCost from "./laborCost.vue";

  import store from '@/store/index.js'
  export default {
    data() {
      return {
        activeName: "first",
        tabPanes: []
      };
    },

    created() {
    //刷新显示刷新的标签栏
      this.activeName = this.$route.params.name ? this.$route.params.name : 'first';
      this.initTabPanes()
    },

    components: {
      expendBudget,
      incomeBudget,
      assetsBudget,
      assetsExpend,
      laborCost,
    },

    methods: {
      handleClick(tab, evnet) {
        this.activeName = tab.name
        let path = this.$route.path.split('/')[1];
        this.$router.push(`/${path}/${tab.name}`)      //对应路由
      },
 
      // 初始化tabs，部分页面需进行权限认证
      initTabPanes() {
        this.tabPanes = [
          { label: "tabName1", name: "first", is: "expendBudget" },
          { label: "tabName2", name: "second", is: "incomeBudget" },
          { label: "tabName3", name: "third", is: "assetsBudget" },
          { label: "tabName4", name: "fourth", is: "assetsExpend" },
          { label: "tabName5", name: "fifth", is: "laborCost" }, 
          
        ]

      }

    }
  };
</script>

<style lang='less' scoped> 
</style>