UP

src/router/systemRouter.js

@@ -32,6 +32,15 @@ const routes = [{
 							icon: "el-icon-user",
 						},
 						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
+					},
+					{
+						name: "report",
+						path: "/template/report",
+						meta: {
+							title: "分析报表",
+							icon: "el-icon-data-analysis",
+						},
+						component: () => import(/* webpackChunkName: "report" */ '@/views/template/report'),
 					}
 				]
 			}

src/views/template/report/index.vue

@@ -0,0 +1,65 @@
+<template>
+	<el-container>
+		<el-aside width="210px">
+			<el-container>
+				<el-header>
+					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
+				</el-header>
+				<el-main class="nopadding">
+					<el-tree ref="group" class="menu" node-key="id" :data="group"></el-tree>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-container>
+
+			<el-header>
+			</el-header>
+			<el-main>
+				<el-card shadow="never">
+					<el-button @click="load('1')">异步加载1</el-button>
+					<el-button @click="load('2')">异步加载2</el-button>
+					<el-button @click="load(null)">卸载组件</el-button>
+					<sc-async-component :src="src"></sc-async-component>
+				</el-card>
+			</el-main>
+		</el-container>
+	</el-container>
+</template>
+
+<script>
+	import scAsyncComponent from './scAsyncComponent'
+
+	export default {
+		name: 'report',
+		components: {
+			scAsyncComponent
+		},
+		data() {
+			return {
+				src: null,
+				groupFilterText: '',
+				group: [
+					{
+						label: '系统运维概况',
+					},
+					{
+						label: '访客分析',
+						children: [
+							{
+								label: '地域分布',
+							},
+							{
+								label: '访客人像',
+							}
+						]
+					}
+				]
+			}
+		},
+		methods: {
+			load(src){
+				this.src = src
+			}
+		}
+	}
+</script>

src/views/template/report/pages/1.vue

@@ -0,0 +1,20 @@
+<template>
+	<div>1</div>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {}
+		},
+		mounted() {
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/template/report/pages/2.vue

@@ -0,0 +1,20 @@
+<template>
+	<div>2</div>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {}
+		},
+		mounted() {
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/template/report/scAsyncComponent/index.vue

@@ -0,0 +1,43 @@
+<template>
+	<component :is="componentFile"></component>
+</template>
+
+<script>
+	import { defineAsyncComponent, markRaw } from "vue"
+
+	export default {
+		props: {
+			src: { type: String, default: "" }
+		},
+		data(){
+			return {
+				componentFile: null
+			}
+		},
+		watch: {
+			src(){
+				this.render()
+			}
+		},
+		mounted() {
+			this.render()
+		},
+		methods: {
+			render(){
+				if(!this.src){
+					this.componentFile = null
+					return false
+				}
+				this.componentFile = markRaw(
+					defineAsyncComponent({
+						loader: () => import(`@/views/template/report/pages/${this.src}`),
+						delay: 0,
+						timeout: 10000,
+						loadingComponent: { template: '<div>加载中</div>' },
+						errorComponent:  { template: '<div>加载失败</div>' }
+					})
+				)
+			}
+		}
+	}
+</script>