添加路由

src/App.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import { dateZhCN, zhCN } from "naive-ui"
-import Editors from "./components/Editors.vue"
-import Preview from "./components/Preview.vue"
-import Tutorial from "./components/Tutorial.vue"
 import { useMagicKeys, whenever } from "@vueuse/core"
 
 const { ctrl_s } = useMagicKeys({
@@ -28,21 +25,7 @@ whenever(ctrl_r, () => {})
     :locale="zhCN"
     :date-locale="dateZhCN"
   >
-    <n-split :default-size="1 / 3" min="300px" max="800px">
-      <template #1>
-        <Tutorial />
-      </template>
-      <template #2>
-        <n-split direction="vertical" min="200px">
-          <template #1>
-            <Editors />
-          </template>
-          <template #2>
-            <Preview />
-          </template>
-        </n-split>
-      </template>
-    </n-split>
+    <router-view></router-view>
   </n-config-provider>
 </template>
 <style scoped>

src/main.ts

@@ -19,6 +19,7 @@ import css from "highlight.js/lib/languages/css"
 import javascript from "highlight.js/lib/languages/javascript"
 //@ts-ignore
 import "highlight.js/styles/github.min.css"
+import { router } from "./router"
 
 hljs.registerLanguage("html", xml)
 hljs.registerLanguage("css", css)
@@ -45,4 +46,5 @@ marked.use(preview({template}))
 const app = createApp(App)
 const naive = create()
 app.use(naive)
+app.use(router)
 app.mount("#app")

src/pages/Home.vue

@@ -0,0 +1,22 @@
+<template>
+    <n-split :default-size="1 / 3" min="300px" max="800px">
+      <template #1>
+        <Tutorial />
+      </template>
+      <template #2>
+        <n-split direction="vertical" min="200px">
+          <template #1>
+            <Editors />
+          </template>
+          <template #2>
+            <Preview />
+          </template>
+        </n-split>
+      </template>
+    </n-split>
+</template>
+<script lang="ts" setup>
+import Editors from "../components/Editors.vue"
+import Preview from "../components/Preview.vue"
+import Tutorial from "../components/Tutorial.vue"
+</script>

src/router.ts

@@ -0,0 +1,10 @@
+import { createWebHistory, createRouter } from "vue-router"
+
+import Home from "./pages/Home.vue"
+
+const routes = [{ path: "/", component: Home }]
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})