在layout下面加载子应用不能使用router-view的插槽,只能直接使用,判断如果为子应用直接使用router-view在主应用下的路由才使用插槽
This commit is contained in:
parent
60c4c39e7e
commit
51b1f5e0d6
@ -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([
|
||||||
|
@ -30,7 +30,7 @@ const registerGlobalMicroApps = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
start({
|
start({
|
||||||
prefetch: false, // 取消预加载
|
prefetch: 'all', // 取消预加载
|
||||||
sandbox: { experimentalStyleIsolation: true },
|
sandbox: { experimentalStyleIsolation: true },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
@ -14,7 +14,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#app {
|
#sub-app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user