在layout下面加载子应用不能使用router-view的插槽，只能直接使用，判断如果为子应用直接使用router-view在主应用下的路由才使用插槽
This commit is contained in:
张传波
parent
60c4c39e7e
commit
51b1f5e0d6
@ -6,57 +6,59 @@
|
||||
* @LastEditTime: 2025-01-17 16:36:25
|
||||
-->
|
||||
<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-header">
|
||||
<div class="layout-header-top">
|
||||
<div class="layout-header-top-left">
|
||||
<span>您好，欢迎来到农业产业服务平台</span>
|
||||
<el-tag>运营大屏</el-tag>
|
||||
<el-tag>产业服务APP</el-tag>
|
||||
<el-tag>产业运营管理</el-tag>
|
||||
</div>
|
||||
<div class="layout-header-top-right">
|
||||
<span>商家中心</span>
|
||||
<span>个人中心</span>
|
||||
<span>返回首页</span>
|
||||
</div>
|
||||
<div class="layout">
|
||||
<div class="layout-header">
|
||||
<div class="layout-header-top">
|
||||
<div class="layout-header-top-left">
|
||||
<span>您好，欢迎来到农业产业服务平台</span>
|
||||
<el-tag>运营大屏</el-tag>
|
||||
<el-tag>产业服务APP</el-tag>
|
||||
<el-tag>产业运营管理</el-tag>
|
||||
</div>
|
||||
<div class="layout-header-top-right">
|
||||
<span>商家中心</span>
|
||||
<span>个人中心</span>
|
||||
<span>返回首页</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-header-bottom">
|
||||
<div class="layout-header-bottom-left">
|
||||
<div class="layout-header-bottom-search">
|
||||
<div class="title">农业产业服务平台</div>
|
||||
<el-input v-model="keyword" placeholder="请输入关键词进行搜索"></el-input>
|
||||
<el-button type="primary" @click="Search">搜索</el-button>
|
||||
</div>
|
||||
<el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal">
|
||||
<app-link v-for="(item, index) in meuns" :key="index" :to="item.path">
|
||||
<el-menu-item>{{ item.label }}</el-menu-item>
|
||||
</app-link>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="layout-header-bottom-right">
|
||||
<div class="layout-header-bottom-right-qr">
|
||||
<div class="layout-header-bottom-right-qr-img">
|
||||
<img :src="qrImg" alt="" />
|
||||
<p>下载数农App</p>
|
||||
</div>
|
||||
<div class="layout-header-bottom">
|
||||
<div class="layout-header-bottom-left">
|
||||
<div class="layout-header-bottom-search">
|
||||
<div class="title">农业产业服务平台</div>
|
||||
<el-input v-model="keyword" placeholder="请输入关键词进行搜索"></el-input>
|
||||
<el-button type="primary" @click="Search">搜索</el-button>
|
||||
</div>
|
||||
<el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal">
|
||||
<app-link v-for="(item, index) in meuns" :key="index" :to="item.path">
|
||||
<el-menu-item>{{ item.label }}</el-menu-item>
|
||||
</app-link>
|
||||
</el-menu>
|
||||
</div>
|
||||
<div class="layout-header-bottom-right">
|
||||
<div class="layout-header-bottom-right-qr">
|
||||
<div class="layout-header-bottom-right-qr-img">
|
||||
<img :src="qrImg" alt="" />
|
||||
<p>下载数农App</p>
|
||||
</div>
|
||||
<div class="layout-header-bottom-right-qr-img">
|
||||
<img :src="qrImg" alt="" />
|
||||
<p>打开数农小程序</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>使用数农手机服务，更方便</p>
|
||||
</div>
|
||||
<div class="layout-header-bottom-right-qr-img">
|
||||
<img :src="qrImg" alt="" />
|
||||
<p>打开数农小程序</p>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="useWrapComponents(Component, route)" :key="route.path" />
|
||||
<p>使用数农手机服务，更方便</p>
|
||||
</div>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</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" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="layout">
|
||||
@ -66,12 +68,16 @@ import { usePermissionStore } from '@/store/modules/permission';
|
||||
import { useWrapComponents } from '@/hooks/useWrapComponents';
|
||||
import { qrImg } from './base64img';
|
||||
import AppLink from './Link.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const SettingStore = useSettingStore();
|
||||
const PermissionStore = usePermissionStore();
|
||||
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes);
|
||||
const isReload = computed(() => SettingStore.isReload);
|
||||
|
||||
const isSubApp = computed(() => route.path.includes('sub'));
|
||||
|
||||
const keyword = ref('');
|
||||
|
||||
const meuns = ref([
|
||||
|
||||
@ -30,7 +30,7 @@ const registerGlobalMicroApps = () => {
|
||||
});
|
||||
|
||||
start({
|
||||
prefetch: false, // 取消预加载
|
||||
prefetch: 'all', // 取消预加载
|
||||
sandbox: { experimentalStyleIsolation: true },
|
||||
});
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ export const constantRoutes = [
|
||||
meta: { title: '平台入口', icon: 'House' },
|
||||
},
|
||||
{
|
||||
path: '/sub-admin/:pathMatch(.*)',
|
||||
path: '/sub-admin/:pathMatch(.*)*',
|
||||
component: () => import('@/views/subApp.vue'),
|
||||
name: 'sub-admin',
|
||||
hidden: true,
|
||||
|
||||
@ -14,7 +14,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
#app {
|
||||
#sub-app {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user