A

src/App.vue

 <template>
-	<div class="content">
-		<div v-html="html"></div>
-	</div>
+  <div id="app" style="height: 100%;">
+    <router-view/>
+  </div>
 </template>
 
 <script>
-	
-	import { api } from "@/api/Api.js"
-	
-	export default {
-		name: 'App',
-		components: {
-
-		},
-		data() {
-			return {
-				html: ""
-			}
-		},
-		computed: {
-			key() {
-				return this.$route.query.key || 'HTML_SYSTEM_DES'
-			}
-		},
-		created() {
-			api.getHtml(this.key)
-			.then(r => {
-				this.html = r
-			})
-			.catch(e => {
-				console.log(e)
-				this.html = "页面出错"
-			})
-		}
-	}
+export default {
+  name: 'App'
+}
 </script>
 
 <style>
-	#app {
-		width: 100%;
-	}
-	.content {
-		display: flex;
-		overflow-y: scroll;
-		padding: 16px;
-	}
-	body, html {
-		width: 100%;
-		height: 100%;
-		padding: 0;
-		margin: 0;
-	}
+  
 </style>

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/h5.vue

+<template>
+	<div class="content">
+		<div v-html="html"></div>
+	</div>
+</template>
+
+<script>
+	
+	import { api } from "@/api/Api.js"
+	
+	export default {
+		name: 'App',
+		components: {
+
+		},
+		data() {
+			return {
+				html: ""
+			}
+		},
+		computed: {
+			key() {
+				return this.$route.query.key || 'HTML_SYSTEM_DES'
+			}
+		},
+		mounted() {
+			api.getHtml(this.key)
+			.then(r => {
+				this.html = r
+			})
+			.catch(e => {
+				console.log(e)
+				this.html = "页面出错"
+			})
+		}
+	}
+</script>
+
+<style>
+	#app {
+		width: 100%;
+	}
+	.content {
+		display: flex;
+		overflow-y: scroll;
+		padding: 16px;
+	}
+	body, html {
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		margin: 0;
+	}
+</style>

src/router/index.js

 import Vue from 'vue'
 import {createRouter, createWebHistory} from 'vue-router'
 
-const routes = []
+const routes = [{
+	path: '/',
+	component: () => import('@/components/h5.vue')
+}]
 
 const router = createRouter({
 	routes,