增加路由，登录单独页面

package-lock.json

@@ -166,6 +166,11 @@
         "@vue/shared": "3.2.37"
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz",
+      "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
+    },
     "@vue/reactivity": {
       "version": "3.2.37",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.37.tgz",
@@ -1209,6 +1214,14 @@
       "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.5.tgz",
       "integrity": "sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA=="
     },
+    "vue-router": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
+      "integrity": "sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0"
+      }
+    },
     "vue3-count-to": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vue3-count-to/-/vue3-count-to-1.1.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "leader-line": "^1.0.7",
     "postcss-pxtorem": "^6.0.0",
     "vue": "^3.2.25",
+    "vue-router": "^4.2.5",
     "vue3-count-to": "^1.1.2",
     "vue3-number-roll-plus": "^0.1.3",
     "vue3-video-play": "^1.3.1-beta.6"

src/App.vue

@@ -1,6 +1,7 @@
 
 <template >
-    <UeVideo />
+      <router-view />
+    <!-- <UeVideo /> -->
 </template>
 <script setup>
 import UeVideo from './components/UeVideo.vue'

src/components/UeVideo.vue

@@ -1,9 +1,9 @@
 
 <template>
-  <div  ref="video" id="player"  v-if="!loginShow"></div>
+  <div  ref="video" id="player"  ></div>
   <!-- <div style="background-color: rgba(156, 167, 84, 0.667); width: 100vw;height: 100vh;position: absolute;" ></div> -->
-  <Login :class="loginShow ? '' : 'hidden'"></Login>
-  <home   v-if="!loginShow"></home>
+ 
+  <home ></home>
   <!-- <div @click="toUE" style="position: absolute;top: 5%; left: 50%;background-color: darkcyan;z-index: 200">向UE发信息</div> -->
 </template>
 
@@ -50,7 +50,10 @@ export default {
 
       // let search = window.location.href.split("?")[1];
 
-      getUserInfo(search)
+      // getUserInfo(search)
+
+
+
       // console.log(search, "编码")
       // let code = result.split("?")[0]; //去掉&之后的冗余部分
 

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 import 'amfe-flexible'
 // 全局引入弹出框
 // import { ElMessage } from 'element-plus'
@@ -12,6 +13,7 @@ import 'vue3-video-play/dist/style.css' // 引入css
 
 const app = createApp(App)
 console.log("全局的app", app)
+app.use(router)
 app.use(vue3videoPlay)
 // app.config.globalProperties.$message = ElMessage;
 // app.use(ElMessage)

src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Home from '../components/UeVideo.vue'
+import Login from '../components/Login.vue'
+
+const routes = [
+    {
+        path: '/login',
+        name: 'Login',
+        component: Login
+      },
+    {
+        path: '/',
+        name: 'Home',
+        component: Home
+    }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router