diff --git a/package.json b/package.json
index d6e090b..923e606 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "node-forge": "^1.3.1",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
+    "vue-router": "^4.4.5",
     "vuetify": "^3.7.4"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7a205e8..d17ddb9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       vue:
         specifier: ^3.4.31
         version: 3.5.12(typescript@5.6.3)
+      vue-router:
+        specifier: ^4.4.5
+        version: 4.4.5(vue@3.5.12(typescript@5.6.3))
       vuetify:
         specifier: ^3.7.4
         version: 3.7.4(typescript@5.6.3)(vite-plugin-vuetify@2.0.4)(vue@3.5.12(typescript@5.6.3))
@@ -387,6 +390,9 @@ packages:
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
+  '@vue/devtools-api@6.6.4':
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
+
   '@vue/language-core@2.1.10':
     resolution: {integrity: sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==}
     peerDependencies:
@@ -717,6 +723,11 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
+  vue-router@4.4.5:
+    resolution: {integrity: sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==}
+    peerDependencies:
+      vue: ^3.2.0
+
   vue-tsc@2.1.10:
     resolution: {integrity: sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==}
     hasBin: true
@@ -976,6 +987,8 @@ snapshots:
       de-indent: 1.0.2
       he: 1.2.0
 
+  '@vue/devtools-api@6.6.4': {}
+
   '@vue/language-core@2.1.10(typescript@5.6.3)':
     dependencies:
       '@volar/language-core': 2.4.10
@@ -1308,6 +1321,11 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.12(typescript@5.6.3)
+
   vue-tsc@2.1.10(typescript@5.6.3):
     dependencies:
       '@volar/typescript': 2.4.10
diff --git a/src/App.vue b/src/App.vue
index 62e2e81..270a927 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,5 @@
 <template>
-  <v-app>
-    <v-main>
-      <Jwt />
-    </v-main>
-  </v-app>
+  <router-view></router-view>
 </template>
 
 <script setup lang="ts">
diff --git a/src/main.ts b/src/main.ts
index c8fc172..7fada19 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,16 +5,18 @@
  */
 
 // Plugins
-import { registerPlugins } from '@/plugins'
+import { registerPlugins } from "@/plugins";
 
 // Components
-import App from './App.vue'
+import App from "./App.vue";
 
 // Composables
-import { createApp } from 'vue'
+import { createApp } from "vue";
+import router from "./router";
 
-const app = createApp(App)
+const app = createApp(App);
 
-registerPlugins(app)
+registerPlugins(app);
+app.use(router);
 
-app.mount('#app')
+app.mount("#app");
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..c9d1cc2
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,39 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+
+const routes = [
+  { path: "/", component: () => import("../views/Jwt.vue") },
+  {
+    path: "/jku",
+    beforeEnter: (to, from, next) => {
+      console.log("jku");
+      const jsonResponse = {
+        name: "John Doe",
+        age: 30,
+        country: "USA",
+      };
+
+      // 将 JSON 数据直接写入到页面，避免 HTML 渲染
+      document.body.innerHTML = `<pre>${JSON.stringify(
+        jsonResponse,
+        null,
+        2
+      )}</pre>`;
+
+      // 直接结束路由导航，不继续渲染组件
+      next(false);
+      next(false);
+    },
+    component: () => import("../views/Jwt.vue"),
+  },
+  {
+    path: "/:catchAll(.*)",
+    component: () => import("../views/Notfound.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;
diff --git a/src/components/Jwt.vue b/src/views/Jwt.vue
similarity index 76%
rename from src/components/Jwt.vue
rename to src/views/Jwt.vue
index 3745e04..23a6b56 100644
--- a/src/components/Jwt.vue
+++ b/src/views/Jwt.vue
@@ -315,59 +315,65 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <div class="d-flex justify-center">
-        <div class="d-flex flex-column w-75">
+    <v-app>
+        <v-main>
+
+
+            <div class="d-flex justify-center">
+                <div class="d-flex flex-column w-75">
+
+                    <div class="d-flex justify-space-between mt-10">
+
+                        <v-btn @mousedown="(event: MouseEvent) => {
+
+                            if (event.button === 0) {
+                                decodeJwt()
+                            } else if (event.button === 1) {
+                                clearJwt()
+                            }
+                        }" variant="text">
+                            <h1>JWT-ALL</h1>
+                        </v-btn>
+
+                        <p>Click <b>JWT-ALL</b> to decode jwt! Middle to Clear!</p>
+
+
+                        <div class="w-33"></div>
+                        <v-text-field class="mr-4" v-model="jwt_secret_key" label="Secret Key" variant="outlined"
+                            @blur="encodeJwt"></v-text-field>
+                        <v-select width="100px" label="Alg" v-model="selected_alg" :items=algs variant="outlined"
+                            @vue:mounted="select_alg" @update:model-value="select_alg"></v-select>
+                    </div>
+
+                    <div>
+                        <v-textarea rows="5" label="S-JWT" variant="outlined" no-resize v-model="sjwt"></v-textarea>
+                        <div class="d-flex">
+                            <v-textarea rows="10" class="mr-2" label="Header" variant="outlined" no-resize
+                                v-model="header" @blur="encodeJwt"></v-textarea>
+                            <v-textarea rows="10" class="mr-2" label="Payload" variant="outlined" no-resize
+                                v-model="payload" @blur="encodeJwt"></v-textarea>
+                            <v-textarea rows="10" label="Verify Signature" variant="outlined" no-resize
+                                v-model="signature_type" readonly></v-textarea>
+                        </div>
+                    </div>
+
+
+                    <v-textarea rows="5" label="T-JWT" variant="outlined" no-resize v-model="tjwt"></v-textarea>
+                    <div class="d-flex">
+                        <v-btn @click="none_attack">None</v-btn>
+                        <v-btn class="ml-4" @click="no_sign_attack">No Sign</v-btn>
+                        <v-btn class="ml-4" @click="brute_force_attack">Brute</v-btn>
+                        <v-btn class="ml-4" @click="jwk_injection_attack">JWK IJ</v-btn>
+                        <v-btn class="ml-4" @click="jku_injection_attack">JKU IJ</v-btn>
+                        <v-btn class="ml-4">KID PATH</v-btn>
+                    </div>
+                    <p class="mt-4">Dictionary: <a
+                            href="https://github.com/wallarm/jwt-secrets">https://github.com/wallarm/jwt-secrets</a></p>
 
-            <div class="d-flex justify-space-between mt-10">
-
-                <v-btn @mousedown="(event: MouseEvent) => {
-
-                    if (event.button === 0) {
-                        decodeJwt()
-                    } else if (event.button === 1) {
-                        clearJwt()
-                    }
-                }" variant="text">
-                    <h1>JWT-ALL</h1>
-                </v-btn>
-
-                <p>Click <b>JWT-ALL</b> to decode jwt! Middle to Clear!</p>
-
-
-                <div class="w-33"></div>
-                <v-text-field class="mr-4" v-model="jwt_secret_key" label="Secret Key" variant="outlined"
-                    @blur="encodeJwt"></v-text-field>
-                <v-select width="100px" label="Alg" v-model="selected_alg" :items=algs variant="outlined"
-                    @vue:mounted="select_alg" @update:model-value="select_alg"></v-select>
-            </div>
-
-            <div>
-                <v-textarea rows="5" label="S-JWT" variant="outlined" no-resize v-model="sjwt"></v-textarea>
-                <div class="d-flex">
-                    <v-textarea rows="10" class="mr-2" label="Header" variant="outlined" no-resize v-model="header"
-                        @blur="encodeJwt"></v-textarea>
-                    <v-textarea rows="10" class="mr-2" label="Payload" variant="outlined" no-resize v-model="payload"
-                        @blur="encodeJwt"></v-textarea>
-                    <v-textarea rows="10" label="Verify Signature" variant="outlined" no-resize v-model="signature_type"
-                        readonly></v-textarea>
                 </div>
-            </div>
 
 
-            <v-textarea rows="5" label="T-JWT" variant="outlined" no-resize v-model="tjwt"></v-textarea>
-            <div class="d-flex">
-                <v-btn @click="none_attack">None</v-btn>
-                <v-btn class="ml-4" @click="no_sign_attack">No Sign</v-btn>
-                <v-btn class="ml-4" @click="brute_force_attack">Brute</v-btn>
-                <v-btn class="ml-4" @click="jwk_injection_attack">JWK IJ</v-btn>
-                <v-btn class="ml-4" @click="jku_injection_attack">JKU IJ</v-btn>
-                <v-btn class="ml-4">KID PATH</v-btn>
             </div>
-            <p class="mt-4">Dictionary: <a
-                    href="https://github.com/wallarm/jwt-secrets">https://github.com/wallarm/jwt-secrets</a></p>
-
-        </div>
-
-
-    </div>
+        </v-main>
+    </v-app>
 </template>
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
new file mode 100644
index 0000000..b472a29
--- /dev/null
+++ b/src/views/NotFound.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+        Not Found
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped></style>
\ No newline at end of file