首页创建成功，路由功能可用，添加404页面。

src/App.vue

@@ -6,10 +6,15 @@ import Toolbar from './components/Toolbar.vue'
 <template>
 <div id="contentPane">
   <Toolbar></Toolbar>
+  <div v-if="$route.path === '/ContactUs'">
+    <router-view/>
+  </div>
+  <div v-else id="defaultcontainer">
     <div id="content"><router-view/></div>
     <div id="footer">
       <Footer></Footer>
     </div>
+  </div>
 </div>
 </template>
 
@@ -23,14 +28,24 @@ import Toolbar from './components/Toolbar.vue'
   flex-direction: column;
   min-height: 100vh;
 }
+#defaultcontainer{
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
 #content{
+  display: flex;
   position: relative;
   flex:1;
   width: 100%;
   min-height: 100%;
 }
 
-@include media-breakpoint-between(xs, sm) {
+#footer{
+  margin-top: 0px;
+}
+
+@include media-breakpoint-between(xs, md) {
 }
 
 @include media-breakpoint-between(md, xl) {

src/components/ContactUs.vue

@@ -1,5 +1,12 @@
-<template>
+<script setup>
+import Footer from './Footer.vue'
+</script>
 
+<template>
+  <div id="contactRoot">
+    <div id="upbar"></div>
+    <Footer></Footer>
+  </div>
 </template>
 
 <script>
@@ -8,6 +15,26 @@ export default {
 }
 </script>
 
-<style scoped>
+<style  lang="scss">
+@import "node_modules/bootstrap/scss/_functions.scss";
+@import "node_modules/bootstrap/scss/_variables.scss";
+@import "node_modules/bootstrap/scss/_mixins.scss";
+#upbar{
+  width: 100%;
+  @include media-breakpoint-between(xs, md) {
+    height: 33px;
+  }
 
+  @include media-breakpoint-between(md, xl) {
+    height: 0px;
+  }
+}
+
+#contactRoot{
+  position: relative;
+  flex:1;
+  width: 100%;
+  height: 100vh;
+  background-color: black;
+}
 </style>

src/components/Footer.vue

@@ -86,6 +86,7 @@ export default {
   #footerroot
   {
     min-height: 759px;
+    margin-top: 0px;
   }
   #footercontent
   {

src/components/Homepage.vue

@@ -1,5 +1,8 @@
 <template>
-
+<div style="position: relative;
+  flex:1;width: 100%;min-height: 100%;background-color: #0dcaf0">
+  <h1>It works!</h1>
+</div>
 </template>
 
 <script>

src/components/Toolbar.vue

@@ -183,8 +183,8 @@ export default {
 #toproot
 {
   display: flex;
-  position: -webkit-sticky;
-  position: sticky;
+  //position: -webkit-fixed;
+  position: fixed;
   top:0px;
   background-color: rgba(255,255,255,0);
   z-index: 7;

src/components/Tools/Err404.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Err404"
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -1,9 +1,20 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router.js'
 
 // 引入Bootstrap CSS
 import 'bootstrap/dist/css/bootstrap.min.css'
 // 引入Bootstrap JS（bundle版本）
 import 'bootstrap/dist/js/bootstrap.bundle.min.js'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')
+// new Vue({
+//     el: '#app',
+//     router,
+//     components: { App },
+//     template: '<App/>'
+// })
+
+// const app = createApp(App)
+// app.use(router)
+// app.mount('#app')

src/router.js

@@ -0,0 +1,26 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes= [
+    {
+        path: '/',
+        name: 'Homepage',
+        component: ()=>import('./components/Homepage.vue')
+    },
+    {
+        path: '/ContactUs',
+        name: 'ContactUs',
+        component: ()=>import('./components/ContactUs.vue')
+    },
+    {
+        path: '/Aboutus',
+        name: 'Aboutus',
+        component: ()=>import('./components/Aboutus.vue')
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+export default router