解决若依Vue3前后端分离添加动态路由切换菜单页面不显示(空白页面)问题

今天在做公司新项目时遇到一个问题,在使用若依vue3版本时遇到了添加动态路由页面有时候不显示的问题,

 在这里添加后,刷新页面也没有显示。最终发现是因为需要给router-view加一个key标志

在/layout/components/AppMain.vue找到AppMain.vue文件,添加以下代码即可

<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());
console.log(routeKey);

const tagsViewStore = useTagsViewStore();
</script>