解决若依Vue3前后端分离---路由切换时显示白屏

解决若依Vue3前后端分离---路由切换时显示白屏

1.问题重述

解决基于Vue3若依前后端分离项目中出现的路由正常切换但是就是不显示数据的问题，也就是不发起网络请求的问题。

找到如下位置中AppMain.vue文件

将除了css中的代码进行替换成如下的代码。

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }" :key="routeKey">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="tagsViewStore.cachedViews">
          <component
              v-if="!route.meta.link"
              :is="Component"
              :key="route.path"
          />
        </keep-alive>
      </transition>
    </router-view>
    <iframe-toggle />
  </section>
</template>

<script setup>
import { useRoute } from 'vue-router';
import iframeToggle from './IframeToggle/index';
import useTagsViewStore from '@/store/modules/tagsView';
const route = useRoute();
const routeKey = computed(() => route.path + Math.random());


const tagsViewStore = useTagsViewStore();
</script>