element + tabs 页面刷新保持刷新之前的页面

例：
个人中心下的 tab 使用：
实现效果： (1) 当点击“个人中心” 下不同的 tab 跳转到 /userCenter?type=“xx” ： 通过 this.$router.push实现(2)当点“个人中心”的时候，跳到第一个tab页（如果是在第2个tab页，也切换至第一个tab页）：通过监{听}^{\prime }$route.query’ 实现

一、使用 query

//个人中心下的tab标签使用
<template>
  <div>
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="历史记录" name="1"></el-tab-pane>
      <el-tab-pane label="我的收藏" name="2"></el-tab-pane>
      <el-tab-pane label="我的关注" name="3"></el-tab-pane>
    </el-tabs>
    <div class="tab-content">
      <keep-alive>
        <component :is="curComponents[activeName]"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import History from "./components/history";
import Collect from "./components/collect ";
import Watch from "./components/watch";
export default {
  data() {
    return {
      activeName: '',
      curComponents: {
        '1': 'History',
        '2': 'Collect',
        '3': 'Watch',
      },
    }
  },
  created() {
    this.activeName = this.$route.query.type || '1';
  },
  components: { History, Collect, Watch},
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
      this.$router.push({
        path: '/userCenter',
        query: { type: this.activeName }
      })
    },
  },
  watch: {
    '$route.query': {
      handler(newval, oldval) {
        this.activeName = newval.type;
      },
      immediate: true
    }
  }
}
</script>

下方是我微信公众号的二维码，可以扫码关注以下，后期博文推送主要在公众号上面，有什么问题也可以通过公众号跟我发消息哦~

二、使用 params（注：使用 params 的时候，要在配置路由的时候加 /userCenter/:type）

<script>
import History from "./components/history";
import Collect from "./components/collect ";
import Watch from "./components/watch";
export default {
  data() {
    return {
      activeName: '',
      curComponents: {
        '1': 'History',
        '2': 'Collect',
        '3': 'Watch',
      },
    }
  },
  created() {
    this.activeName = this.$route.params.type || '1';
  },
  components: { History, Collect, Watch},
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
       this.$router.push({
         name: 'userCenter',
         params: { type: this.activeName }
       });
    },
  },
  watch: {
     '$route.params': {
      handler(newval, oldval) {
         // console.log(newval)
         this.activeName = newval.type;
      },
      immediate: true
     },
  }
}
</script>