feat(router): 使用 vue-router

package-lock.json

@@ -19,6 +19,7 @@
 				"prettier": "^2.8.4",
 				"typescript": "^4.6.4",
 				"vite": "^4.0.0",
+				"vue-router": "^4.1.6",
 				"vue-tsc": "^1.0.11"
 			}
 		},
@@ -681,6 +682,12 @@
 				"@vue/shared": "3.2.47"
 			}
 		},
+		"node_modules/@vue/devtools-api": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
+			"integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==",
+			"dev": true
+		},
 		"node_modules/@vue/reactivity": {
 			"version": "3.2.47",
 			"resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.2.47.tgz",
@@ -1063,6 +1070,18 @@
 				"@vue/shared": "3.2.47"
 			}
 		},
+		"node_modules/vue-router": {
+			"version": "4.1.6",
+			"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.6.tgz",
+			"integrity": "sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==",
+			"dev": true,
+			"dependencies": {
+				"@vue/devtools-api": "^6.4.5"
+			},
+			"peerDependencies": {
+				"vue": "^3.2.0"
+			}
+		},
 		"node_modules/vue-template-compiler": {
 			"version": "2.7.14",
 			"resolved": "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",

package.json

@@ -40,6 +40,7 @@
 		"prettier": "^2.8.4",
 		"typescript": "^4.6.4",
 		"vite": "^4.0.0",
+		"vue-router": "^4.1.6",
 		"vue-tsc": "^1.0.11"
 	}
 }

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
-import "./styles.css";
 import App from "./App.vue";
+// 路由
+import router from "./router";
 
-createApp(App).mount("#app");
+createApp(App).use(router).mount("#app");

src/pages/Config.vue

@@ -0,0 +1,13 @@
+<template>
+	<h1>设置页面</h1>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "Config",
+});
+</script>
+
+<style lang="css"></style>

src/pages/Home.vue

@@ -0,0 +1,13 @@
+<template>
+	<h1>首页</h1>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "Home",
+});
+</script>
+
+<style lang="css"></style>

src/router/index.ts

@@ -0,0 +1,9 @@
+import { createRouter, createWebHistory } from "vue-router";
+import routes from "./routes";
+
+const router = createRouter({
+	history: createWebHistory(),
+	routes: routes,
+});
+
+export default router;

src/router/routes.ts

@@ -0,0 +1,17 @@
+import Home from "../pages/Home.vue";
+import Config from "../pages/Config.vue";
+
+const routes = [
+	{
+		path: "/",
+		name: "Home",
+		component: Home,
+	},
+	{
+		path: "/config",
+		name: "Config",
+		component: Config,
+	},
+];
+
+export default routes;