在layout下面加载子应用不能使用router-view的插槽,只能直接使用,判断如果为子应用直接使用router-view在主应用下的路由才使用插槽

This commit is contained in:
张传波 2025-01-22 16:32:50 +08:00
parent 60c4c39e7e
commit 51b1f5e0d6
4 changed files with 56 additions and 50 deletions

View File

@ -6,9 +6,6 @@
* @LastEditTime: 2025-01-17 16:36:25 * @LastEditTime: 2025-01-17 16:36:25
--> -->
<template> <template>
<router-view v-slot="{ Component, route }">
<transition name="fade-slide" mode="out-in" appear>
<keep-alive v-if="isReload" :include="cacheRoutes">
<div class="layout"> <div class="layout">
<div class="layout-header"> <div class="layout-header">
<div class="layout-header-top"> <div class="layout-header-top">
@ -52,11 +49,16 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 子应用不能使用router-view的插槽功能 -->
<router-view v-if="isSubApp" />
<router-view v-else v-slot="{ Component, route }">
<transition name="fade-slide" mode="out-in" appear>
<keep-alive v-if="isReload" :include="cacheRoutes">
<component :is="useWrapComponents(Component, route)" :key="route.path" /> <component :is="useWrapComponents(Component, route)" :key="route.path" />
</div>
</keep-alive> </keep-alive>
</transition> </transition>
</router-view> </router-view>
</div>
</template> </template>
<script setup name="layout"> <script setup name="layout">
@ -66,12 +68,16 @@ import { usePermissionStore } from '@/store/modules/permission';
import { useWrapComponents } from '@/hooks/useWrapComponents'; import { useWrapComponents } from '@/hooks/useWrapComponents';
import { qrImg } from './base64img'; import { qrImg } from './base64img';
import AppLink from './Link.vue'; import AppLink from './Link.vue';
import { useRoute } from 'vue-router';
const route = useRoute();
const SettingStore = useSettingStore(); const SettingStore = useSettingStore();
const PermissionStore = usePermissionStore(); const PermissionStore = usePermissionStore();
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes); const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes);
const isReload = computed(() => SettingStore.isReload); const isReload = computed(() => SettingStore.isReload);
const isSubApp = computed(() => route.path.includes('sub'));
const keyword = ref(''); const keyword = ref('');
const meuns = ref([ const meuns = ref([

View File

@ -30,7 +30,7 @@ const registerGlobalMicroApps = () => {
}); });
start({ start({
prefetch: false, // 取消预加载 prefetch: 'all', // 取消预加载
sandbox: { experimentalStyleIsolation: true }, sandbox: { experimentalStyleIsolation: true },
}); });

View File

@ -32,7 +32,7 @@ export const constantRoutes = [
meta: { title: '平台入口', icon: 'House' }, meta: { title: '平台入口', icon: 'House' },
}, },
{ {
path: '/sub-admin/:pathMatch(.*)', path: '/sub-admin/:pathMatch(.*)*',
component: () => import('@/views/subApp.vue'), component: () => import('@/views/subApp.vue'),
name: 'sub-admin', name: 'sub-admin',
hidden: true, hidden: true,

View File

@ -14,7 +14,7 @@ export default {
}; };
</script> </script>
<style> <style>
#app { #sub-app {
width: 100%; width: 100%;
} }
</style> </style>