✨ 路由功能

src/components/popup.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="root">
-    <init-server/>
+    <router-view/>
   </div>
 </template>
 

src/edge/popup/popup.ts

@@ -1,8 +1,9 @@
-import { createApp } from 'vue'
+import {createApp} from 'vue'
 import Popup from '@/components/popup.vue'
 import "@/styles/popup.less"
-import { createPinia } from 'pinia'
+import {createPinia} from 'pinia'
+import {router} from "./router"
 const app = createApp(Popup)
-
+app.use(router)
 app.use(createPinia())
 app.mount('#app')

src/edge/popup/router.ts

@@ -0,0 +1,13 @@
+import {createWebHashHistory, createRouter} from "vue-router"
+import InitServer from "@/components/popup/init-server.vue"
+
+export const router = createRouter({
+    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
+    history: createWebHashHistory(),
+    routes: [
+        {
+            path: "/init-server",
+            component: InitServer
+        }
+    ]
+});

yarn.lock

@@ -1934,7 +1934,7 @@
 
 "vue-router@^4.0.14":
   "integrity" "sha512-wAO6zF9zxA3u+7AkMPqw9LjoUCjSxfFvINQj3E/DceTt6uEz1XZLraDhdg2EYmvVwTBSGlLYsUw8bDmx0754Mw=="
-  "resolved" "https://registry.npmjs.org/vue-router/-/vue-router-4.0.14.tgz"
+  "resolved" "https://registry.npmmirror.com/vue-router/-/vue-router-4.0.14.tgz"
   "version" "4.0.14"
   dependencies:
     "@vue/devtools-api" "^6.0.0"