v-if面板切换后点击返回按钮回到切换前的样子

你可以使用 Vue Router 中的导航守卫来实现这个功能。具体步骤如下：

1. 在 Vue 组件中添加一个返回按钮，并绑定一个点击事件。

<template>
  <div>
    <button @click="goBack">返回</button>
    <div v-if="showPanelA">面板A</div>
    <div v-else>面板B</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPanelA: true,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一个页面
    },
  },
};
</script>

2. 在 Vue Router 中添加一个 `beforeRouteLeave` 导航守卫，用于保存当前组件的状态。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/panel',
      component: Panel,
      beforeRouteLeave(to, from, next) {
        // 保存当前组件的状态
        const showPanelA = this.$refs.panel.showPanelA;
        sessionStorage.setItem('showPanelA', showPanelA);
        next();
      },
    },
  ],
});

3. 在组件的 `mounted` 生命周期中，读取之前保存的状态，并更新组件的显示状态。

export default {
  data() {
    return {
      showPanelA: true,
    };
  },
  mounted() {
    // 读取之前保存的状态
    const showPanelA = sessionStorage.getItem('showPanelA');
    if (showPanelA !== null) {
      this.showPanelA = JSON.parse(showPanelA);
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1); // 返回上一个页面
    },
  },
};

这样，在切换面板时保存状态，在点击返回按钮时恢复状态，就可以实现点击返回按钮回到切换前的样子的功能了。