vue的模板切换，可以切换多个模板

1. app.vue 里面正常写 router-view 标签

		<template>
	
		  <el-config-provider :size="getGlobalComponentSize" :locale="i18nLocale">
	
		    <router-view v-show="themeConfig.lockScreenTime > 1"/>
	
		    <!--    // 屏幕锁-->
	
		    <LockScreen v-if="themeConfig.isLockScreen"/>
	
		    <!--    设置界面-->
	
		    <Setings ref="setingsRef" v-show="themeConfig.lockScreenTime > 1"/>
	
		    <CloseFull v-if="!themeConfig.isLockScreen"/>
	
		  </el-config-provider>
	
		</template>

2. 设计好模板 layout/index.vue 入口和模板（通过component 加载各种模板）

		<template>
	
		    <component :is="themeConfig.layout" />
	
		</template>
	
		<script lang="ts">
	
		import { onBeforeMount, onUnmounted, getCurrentInstance, defineComponent, defineAsyncComponent } from 'vue';
	
		import { storeToRefs } from 'pinia';
	
		import { useThemeConfig } from '/@/stores/themeConfig';
	
		import { Local } from '/@/utils/storage';
	
		export default defineComponent({
	
		    name: 'layout',
	
		    components: {
	
		    // defineAsyncComponent 异步加载组件
	
		        defaults: defineAsyncComponent(() => import('/@/layout/main/defaults.vue')),
	
		        classic: defineAsyncComponent(() => import('/@/layout/main/classic.vue')),
	
		        transverse: defineAsyncComponent(() => import('/@/layout/main/transverse.vue')),
	
		        columns: defineAsyncComponent(() => import('/@/layout/main/columns.vue')),
	
		    },

3. 模板中写 router-view标签（default.vue）

		<template>
	
		    <el-container class="layout-container">
	
		        <Aside />
	
		        <el-container class="flex-center" :class="{ 'layout-backtop': !isFixedHeader }">
	
		            <Header v-if="isFixedHeader" />
	
		            <el-scrollbar ref="layoutDefaultsScrollbarRef" :class="{ 'layout-backtop': isFixedHeader }">
	
		                <Header v-if="!isFixedHeader" />
	
		                <router-view></router-view>
	
		            </el-scrollbar>
	
		        </el-container>
	
		        <el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
	
		    </el-container>
	
		</template>

4. 配置路由入口（关键点，看半天没看懂就在这里）

		const routes = [
	
		    {
	
		        // 关键点  所有的路由都放到 模板下面的children就相当于每次访问模板了
	
		        path: '/',
	
		        name: '/',
	
		        component: () => import('/@/layout/index.vue'),
	
		        children: [
	
		            {
	
		                name: 'a',
	
		                path: '/a',
	
		                component: () => import('/@/views/a.vue')
	
		            },
	
		            {
	
		                name: 'b',
	
		                path: '/b',
	
		                component: () => import('/@/views/b.vue')
	
		            },
	
		        ]
	
		    }
	
		];