feat(router): 使用 vue-router

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;