路由

package.json

@@ -12,7 +12,8 @@
     "sass-loader": "^12.1.0",
     "style-loader": "^3.2.1",
     "vfonts": "^0.1.0",
-    "vue": "^3.2.6"
+    "vue": "^3.2.6",
+    "vue-router": "^4.0.11"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.6.0",

src/App.vue

@@ -1,17 +1,14 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
-  <div class="top">
-    
-  </div>
+<router-view></router-view>
+
 </template>
 
-<style lang="scss" scoped>
-.top{
-  width:100vw;
-  height:100vh;
-  background:red;
+<style lang="scss">
+*{
+  margin:0;
+  padding:0;
 }
 </style>
+<script setup lang="ts">
+
+</script>

src/main.ts

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import naive from 'naive-ui'
+import {router} from "./route"
 
-createApp(App).use(naive).mount('#app')
+
+createApp(App).use(naive).use(router).mount('#app')

src/page/home.vue

@@ -0,0 +1,15 @@
+<template>
+  dksjdksa
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+export default defineComponent({
+ name: 'home',
+ props: {},
+})
+</script>
+
+<style>
+
+</style>

src/page/install.ts

@@ -0,0 +1,12 @@
+import { App } from 'vue'
+import home from './home.vue'
+import login from "./login.vue"
+home.install = (app: App) => {
+  app.component(home.name, home);
+}
+
+login.install = (app: App) => {
+  app.component(login.name, login);
+}
+
+export let zujian=[home,login]

src/page/login.vue

@@ -0,0 +1,15 @@
+<template>
+  login
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+export default defineComponent({
+ name: 'login',
+ props: {},
+})
+</script>
+
+<style>
+
+</style>

src/route/index.ts

@@ -0,0 +1,36 @@
+import { createRouter,createWebHashHistory, RouteRecord} from "vue-router";
+import {zujian} from "../page/install"
+interface routesgeshi{
+  path:String,
+  name:String,
+  component:object
+}
+let routes1 :Array<RouteRecord>=[]
+
+for(let i in zujian){
+  console.log(i)
+  routes1.push({
+    path:"/"+zujian[i].name,
+    name:zujian[i].name,
+    component:zujian[i]
+  })
+}
+console.log(routes1)
+console.log(zujian, typeof zujian)
+// const routes = [
+//   // {
+//   //   path: "/home",
+//   //   name: "home",
+//   //   component: zujian.home
+//   // }
+//   // {
+//   //   path: "/login",
+//   //   name: "login",
+//   //   component: login
+//   // },
+// ]
+
+export const router = createRouter({
+    history: createWebHashHistory(),
+    routes: routes1
+  })

yarn.lock

@@ -274,6 +274,11 @@
     "@vue/compiler-dom" "3.2.6"
     "@vue/shared" "3.2.6"
 
+"@vue/devtools-api@^6.0.0-beta.14":
+  version "6.0.0-beta.15"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.15.tgz#ad7cb384e062f165bcf9c83732125bffbc2ad83d"
+  integrity sha512-quBx4Jjpexo6KDiNUGFr/zF/2A4srKM9S9v2uHgMXSU//hjgq1eGzqkIFql8T9gfX5ZaVOUzYBP3jIdIR3PKIA==
+
 "@vue/reactivity@3.2.6", "@vue/reactivity@^3.2.6":
   version "3.2.6"
   resolved "https://registry.nlark.com/@vue/reactivity/download/@vue/reactivity-3.2.6.tgz?cache=0&sync_timestamp=1629824253192&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40vue%2Freactivity%2Fdownload%2F%40vue%2Freactivity-3.2.6.tgz#b8993fa6f48545178e588e25a9c9431a1c1b7d50"
@@ -2582,6 +2587,13 @@ vscode-vue-languageservice@^0.27.0:
     vscode-pug-languageservice "^0.27.8"
     vscode-typescript-languageservice "^0.27.8"
 
+vue-router@^4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.11.tgz#cd649a0941c635281763a20965b599643ddc68ed"
+  integrity sha512-sha6I8fx9HWtvTrFZfxZkiQQBpqSeT+UCwauYjkdOQYRvwsGwimlQQE2ayqUwuuXGzquFpCPoXzYKWlzL4OuXg==
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.14"
+
 vue-tsc@^0.2.2:
   version "0.2.3"
   resolved "https://registry.nlark.com/vue-tsc/download/vue-tsc-0.2.3.tgz#12bf48e3c9b1e553d31aad0c641722d5d15841d8"