第一次尝试将各个url分开访问

package-lock.json

@@ -1285,7 +1285,7 @@
     },
     "node_modules/vue-router": {
       "version": "4.4.0",
-      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
       "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
       "dependencies": {
         "@vue/devtools-api": "^6.5.1"

package.json

@@ -9,10 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "element-plus": "^2.7.6",
     "vue": "^3.4.29",
     "vue-router": "^4.4.0",
-    "axios": "^1.7.2",
     "vuex": "^4.1.0"
   },
   "devDependencies": {

src/App.vue

@@ -1,30 +1,39 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
+import authentication from "./components/authentication.vue";
 </script>
 
 <template>
-  <div>
+  <div id="app">
-    <a href="https://vitejs.dev" target="_blank">
+    <router-view v-if="isHelloRoute"><HelloWorld/></router-view>
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
+    <router-view v-if="isAuthenRoute"><authentication/></router-view>
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
-<style scoped>
+<script>
-.logo {
+export default {
-  height: 6em;
+  name: 'App',
-  padding: 1.5em;
+  computed: {
-  will-change: filter;
+    isHelloRoute() {
-  transition: filter 300ms;
+      return this.$route.path === '/about'; // 根据实际的路由路径进行判断
+    },
+    isAuthenRoute() {
+      return this.$route.path === '/login'; // 根据实际的路由路径进行判断
     }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
   }
-.logo.vue:hover {
+};
-  filter: drop-shadow(0 0 2em #42b883aa);
+</script>
-}
+<!--<style scoped>-->
-</style>
+<!--.logo {-->
+<!--  height: 6em;-->
+<!--  padding: 1.5em;-->
+<!--  will-change: filter;-->
+<!--  transition: filter 300ms;-->
+<!--}-->
+<!--.logo:hover {-->
+<!--  filter: drop-shadow(0 0 2em #646cffaa);-->
+<!--}-->
+<!--.logo.vue:hover {-->
+<!--  filter: drop-shadow(0 0 2em #42b883aa);-->
+<!--}-->
+<!--</style>-->

src/components/HelloWorld.vue

@@ -13,8 +13,9 @@ const count = ref(0)
 <template>
   <h1>{{ msg }}</h1>
 
+
   <div class="card">
-    <el-button type="success" @click="count++">count is {{ count }}</el-button>
+    <el-button type="danger" @click="count++">count is {{ count }}</el-button>
     <p>
       Edit
       <code>components/HelloWorld.vue</code> to test HMR

src/components/authentication.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <h1>登录</h1>
+  <el-input >pls enter the username</el-input>
+  <el-input>pls enter the username</el-input>
+</template>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -6,9 +6,11 @@ import meetingManagementRoutes from './meetingManagement'
 import newsManagementRoutes from './newsManagement'
 import organizationManagementRoutes from './organizationManagement'
 import userManagementRoutes from './userManagement'
+import authentication from "../components/authentication.vue";
 
 const routes = [
-    { path: '/', component: HelloWorld },
+    { path: '/about', component: HelloWorld },
+    { path: '/login', component: authentication},
     ...authenticationRoutes,
     ...courseManagementRoutes,
     ...meetingManagementRoutes,

src/services/authenticationService.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from '../App.vue';
+import router from '../router';
+
+createApp(App).use(router).mount('#app');