vue页面切换抖动的问题及解决过程

<template>
  <div>
    <router-view v-if="$route.meta.keepAlive" />
    <keep-alive>
      <router-view v-if="!$route.meta.keepAlive" />
    </keep-alive>
  </div>
</template>

const routes = [
  {
    path: '/tab1',
    component: Tab1,
    meta: { keepAlive: true },
  },
  {
    path: '/tab2',
    component: Tab2,
    meta: { keepAlive: true },
  },
  // ...
];

// 在 vuex 中定义一个状态，用于存储当前活动的 Tab
const store = new Vuex.Store({
  state: {
    activeTab: 'tab1',
  },
  mutations: {
    setActiveTab(state, tab) {
      state.activeTab = tab;
    },
  },
});

// 在组件中使用
<template>
  <div>
    <router-view />
  </div>
</template>

<script>
export default {
  computed: {
    activeTab() {
      return this.$store.state.activeTab;
    },
  },
  watch: {
    '$route.path': 'updateActiveTab',
  },
  methods: {
    updateActiveTab() {
      this.$store.commit('setActiveTab', this.$route.meta.tab);
    },
  },
};
</script>

router.beforeEach((to, from, next) => {
  if (to.meta.cache && from.meta.cache) {
    // 执行缓存逻辑
  }
  next();
});

<template>
  <component :is="activeTabComponent" />
</template>

<script>
export default {
  data() {
    return {
      activeTabComponent: 'Tab1',
    };
  },
  watch: {
    '$route.meta.tab': 'updateActiveTab',
  },
  methods: {
    updateActiveTab() {
      this.activeTabComponent = this.$route.meta.tab;
    },
  },
};
</script>