diff --git a/components.d.ts b/components.d.ts
index af5bcef8..51d9ae36 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -43,29 +43,31 @@ declare module 'vue' {
     Empty: typeof import('./src/components/Empty.vue')['default']
     FeedbackModal: typeof import('./src/components/toolbar/FeedbackModal.vue')['default']
     Fireworks: typeof import('./src/components/Fireworks.vue')['default']
-    Footer: typeof import('./src/components/Practice/Footer.vue')['default']
+    Footer: typeof import('./src/pages/practice/Footer.vue')['default']
     IconWrapper: typeof import('./src/components/IconWrapper.vue')['default']
     Input: typeof import('./src/components/Input.vue')['default']
     List: typeof import('./src/components/list/List.vue')['default']
     ListItem: typeof import('./src/components/list/ListItem.vue')['default']
     MiniDialog: typeof import('./src/components/dialog/MiniDialog.vue')['default']
-    Options: typeof import('./src/components/Practice/Options.vue')['default']
-    Panel: typeof import('./src/components/Practice/Panel.vue')['default']
+    Options: typeof import('./src/pages/practice/Options.vue')['default']
+    Panel: typeof import('./src/pages/practice/Panel.vue')['default']
     PopConfirm: typeof import('./src/components/PopConfirm.vue')['default']
-    Practice: typeof import('./src/components/Practice/index.vue')['default']
-    PracticeArticle: typeof import('./src/components/Practice/practice-article/index.vue')['default']
-    PracticeWord: typeof import('./src/components/Practice/practice-word/index.vue')['default']
+    Practice: typeof import('./src/pages/practice/index.vue')['default']
+    PracticeArticle: typeof import('./src/pages/practice/practice-article/index.vue')['default']
+    PracticeWord: typeof import('./src/pages/practice/practice-word/index.vue')['default']
     RepeatSetting: typeof import('./src/components/toolbar/RepeatSetting.vue')['default']
     Ring: typeof import('./src/components/Ring.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
     SettingDialog: typeof import('./src/components/dialog/SettingDialog.vue')['default']
     Slide: typeof import('./src/components/Slide.vue')['default']
-    Statistics: typeof import('./src/components/Practice/Statistics.vue')['default']
+    Statistics: typeof import('./src/pages/practice/Statistics.vue')['default']
     Toolbar: typeof import('./src/components/toolbar/index.vue')['default']
     Tooltip: typeof import('./src/components/Tooltip.vue')['default']
     TranslateSetting: typeof import('./src/components/toolbar/TranslateSetting.vue')['default']
-    Typing: typeof import('./src/components/Practice/practice-word/Typing.vue')['default']
-    TypingArticle: typeof import('./src/components/Practice/practice-article/TypingArticle.vue')['default']
-    TypingWord: typeof import('./src/components/Practice/practice-word/TypingWord.vue')['default']
+    Typing: typeof import('./src/pages/practice/practice-word/Typing.vue')['default']
+    TypingArticle: typeof import('./src/pages/practice/practice-article/TypingArticle.vue')['default']
+    TypingWord: typeof import('./src/pages/practice/practice-word/TypingWord.vue')['default']
     VirtualWordList: typeof import('./src/components/list/VirtualWordList.vue')['default']
     VolumeIcon: typeof import('./src/components/icon/VolumeIcon.vue')['default']
     VolumeSetting: typeof import('./src/components/toolbar/VolumeSetting.vue')['default']
diff --git a/package.json b/package.json
index 9aaf5360..a55bd44a 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "vue": "^3.3.4",
     "vue-activity-calendar": "^1.2.2",
     "vue-i18n": "9",
+    "vue-router": "4",
     "vue-virtual-list-v3": "^1.5.1"
   },
   "devDependencies": {
@@ -47,6 +48,8 @@
     "@vue/compiler-sfc": "^3.3.4",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
+    "esm": "^3.2.25",
+    "gulp": "^4.0.2",
     "husky": "^8.0.3",
     "push-dir": "^0.4.1",
     "rollup-plugin-visualizer": "^5.9.2",
@@ -57,8 +60,6 @@
     "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.5",
     "vue-tsc": "^1.8.5",
-    "esm": "^3.2.25",
-    "gulp": "^4.0.2",
     "xlsx": "^0.18.5"
   },
   "config": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd124d58..d2f7b80f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,9 @@ dependencies:
   vue-i18n:
     specifier: '9'
     version: 9.6.5(vue@3.3.4)
+  vue-router:
+    specifier: '4'
+    version: 4.2.5(vue@3.3.4)
   vue-virtual-list-v3:
     specifier: ^1.5.1
     version: 1.5.1
@@ -5077,6 +5080,15 @@ packages:
       vue: 3.3.4
     dev: false
 
+  /vue-router@4.2.5(vue@3.3.4):
+    resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
+    peerDependencies:
+      vue: ^3.2.0
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      vue: 3.3.4
+    dev: false
+
   /vue-template-compiler@2.7.14:
     resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==}
     dependencies:
diff --git a/src/App.vue b/src/App.vue
index 34bc04ea..5a7ef85a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
 import {onMounted, watch} from "vue";
 import {BaseState, useBaseStore} from "@/stores/base.ts";
 import {DictType, SaveConfig, SaveDict} from "@/types.ts"
-import Practice from "@/components/Practice/index.vue"
+import Practice from "@/pages/practice/index.vue"
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {cloneDeep} from "lodash-es";
@@ -65,9 +65,7 @@ onMounted(() => {
 
 <template>
   <Backgorund/>
-  <div class="main-page anim">
-    <Practice/>
-  </div>
+  <router-view/>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/main.ts b/src/main.ts
index 224354a6..0c368691 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import {createPinia} from "pinia"
 import VirtualList from 'vue-virtual-list-v3';
 import ZH from "@/locales/zh-CN.ts";
 import {createI18n} from 'vue-i18n'
+import router from "@/router.ts";
 
 const i18n = createI18n({
   locale: 'zh-CN',
@@ -15,6 +16,7 @@ const i18n = createI18n({
     'zh-CN': ZH
   },
 })
+
 const pinia = createPinia()
 // const app = createApp(Mobile)
 const app = createApp(App)
@@ -23,5 +25,6 @@ const app = createApp(App)
 app.use(pinia)
 app.use(VirtualList);
 app.use(i18n)
+app.use(router)
 
 app.mount('#app')
\ No newline at end of file
diff --git a/src/pages/dict/index.vue b/src/pages/dict/index.vue
new file mode 100644
index 00000000..ebd85164
--- /dev/null
+++ b/src/pages/dict/index.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div id="page">
+    dict
+  </div>
+</template>
+
+<style scoped lang="scss">
+#page {
+  width: 100%;
+  height: 100%;
+  color: white;
+  position: relative;
+  z-index: 2;
+  font-size: 14rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Practice/Footer.vue b/src/pages/practice/Footer.vue
similarity index 100%
rename from src/components/Practice/Footer.vue
rename to src/pages/practice/Footer.vue
diff --git a/src/components/Practice/Options.vue b/src/pages/practice/Options.vue
similarity index 100%
rename from src/components/Practice/Options.vue
rename to src/pages/practice/Options.vue
diff --git a/src/components/Practice/Panel.vue b/src/pages/practice/Panel.vue
similarity index 99%
rename from src/components/Practice/Panel.vue
rename to src/pages/practice/Panel.vue
index 4b120dce..3dcdc45b 100644
--- a/src/components/Practice/Panel.vue
+++ b/src/pages/practice/Panel.vue
@@ -213,7 +213,7 @@ const {
   </Transition>
 </template>
 <style scoped lang="scss">
-@import "@/assets/css/variable.scss";
+@import "@/assets/css/variable";
 
 $header-height: 50rem;
 
diff --git a/src/components/Practice/Statistics.vue b/src/pages/practice/Statistics.vue
similarity index 99%
rename from src/components/Practice/Statistics.vue
rename to src/pages/practice/Statistics.vue
index a269338c..9d553f65 100644
--- a/src/components/Practice/Statistics.vue
+++ b/src/pages/practice/Statistics.vue
@@ -126,7 +126,7 @@ const isEnd = $computed(() => {
   <Fireworks v-if="statModalIsOpen"/>
 </template>
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .statistics {
   width: 800rem;
diff --git a/src/components/Practice/index.vue b/src/pages/practice/index.vue
similarity index 93%
rename from src/components/Practice/index.vue
rename to src/pages/practice/index.vue
index 7af1d5a5..c15000ad 100644
--- a/src/components/Practice/index.vue
+++ b/src/pages/practice/index.vue
@@ -3,16 +3,16 @@
 import Toolbar from "@/components/toolbar/index.vue"
 import {onMounted, onUnmounted, watch} from "vue";
 import {usePracticeStore} from "@/stores/practice.ts";
-import Footer from "@/components/Practice/Footer.vue";
+import Footer from "@/pages/practice/Footer.vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {$ref} from "vue/macros";
-import Statistics from "@/components/Practice/Statistics.vue";
-import {emitter, EventKey} from "@/utils/eventBus";
-import {useSettingStore} from "@/stores/setting";
+import Statistics from "@/pages/practice/Statistics.vue";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
+import {useSettingStore} from "@/stores/setting.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {MessageBox} from "@/utils/MessageBox.tsx";
-import PracticeArticle from "@/components/Practice/practice-article/index.vue";
-import PracticeWord from "@/components/Practice/practice-word/index.vue";
+import PracticeArticle from "@/pages/practice/practice-article/index.vue";
+import PracticeWord from "@/pages/practice/practice-word/index.vue";
 import {ShortcutKey} from "@/types.ts";
 import useTheme from "@/hooks/useTheme.ts";
 import SettingDialog from "@/components/dialog/SettingDialog.vue";
diff --git a/src/components/Practice/practice-article/TypingArticle.vue b/src/pages/practice/practice-article/TypingArticle.vue
similarity index 99%
rename from src/components/Practice/practice-article/TypingArticle.vue
rename to src/pages/practice/practice-article/TypingArticle.vue
index 847c4623..b4a5fb3a 100644
--- a/src/components/Practice/practice-article/TypingArticle.vue
+++ b/src/pages/practice/practice-article/TypingArticle.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import {computed, nextTick, onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros";
-import {Article, ArticleWord, DefaultArticle, ShortcutKey, ShortcutKeyMap, Word} from "@/types";
-import {useBaseStore} from "@/stores/base";
+import {Article, ArticleWord, DefaultArticle, ShortcutKey, ShortcutKeyMap, Word} from "@/types.ts";
+import {useBaseStore} from "@/stores/base.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio} from "@/hooks/sound.ts";
 import {useOnKeyboardEventListener} from "@/hooks/event.ts";
 import {cloneDeep} from "lodash-es";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
-import Options from "@/components/Practice/Options.vue";
+import Options from "@/pages/practice/Options.vue";
 import {Icon} from "@iconify/vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import Tooltip from "@/components/Tooltip.vue";
@@ -479,7 +479,7 @@ const {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 .wrote {
   //color: green;
diff --git a/src/components/Practice/practice-article/index.vue b/src/pages/practice/practice-article/index.vue
similarity index 98%
rename from src/components/Practice/practice-article/index.vue
rename to src/pages/practice/practice-article/index.vue
index e2fd4751..a989a9a1 100644
--- a/src/components/Practice/practice-article/index.vue
+++ b/src/pages/practice/practice-article/index.vue
@@ -12,7 +12,7 @@ import {
   Word
 } from "@/types.ts";
 import {cloneDeep} from "lodash-es";
-import TypingWord from "@/components/Practice/practice-word/TypingWord.vue";
+import TypingWord from "@/pages/practice/practice-word/TypingWord.vue";
 import Panel from "../Panel.vue";
 import {onMounted, watch} from "vue";
 import {renewSectionTexts, renewSectionTranslates} from "@/hooks/translate.ts";
@@ -317,7 +317,7 @@ const {
 </template>
 
 <style scoped lang="scss">
-@import "@/assets/css/style.scss";
+@import "@/assets/css/style";
 
 $article-width: 50vw;
 
diff --git a/src/components/Practice/practice-word/Typing.vue b/src/pages/practice/practice-word/Typing.vue
similarity index 100%
rename from src/components/Practice/practice-word/Typing.vue
rename to src/pages/practice/practice-word/Typing.vue
diff --git a/src/components/Practice/practice-word/TypingWord.vue b/src/pages/practice/practice-word/TypingWord.vue
similarity index 98%
rename from src/components/Practice/practice-word/TypingWord.vue
rename to src/pages/practice/practice-word/TypingWord.vue
index c7c9b341..c114325b 100644
--- a/src/components/Practice/practice-word/TypingWord.vue
+++ b/src/pages/practice/practice-word/TypingWord.vue
@@ -2,7 +2,7 @@
 import {onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros"
 import {useBaseStore} from "@/stores/base.ts"
-import {DefaultDisplayStatistics, DictType, ShortcutKey, Word} from "../../../types";
+import {DefaultDisplayStatistics, DictType, ShortcutKey, Word} from "../../../types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
 import {cloneDeep} from "lodash-es"
 import {usePracticeStore} from "@/stores/practice.ts"
@@ -10,9 +10,9 @@ import {useSettingStore} from "@/stores/setting.ts";
 import {useOnKeyboardEventListener} from "@/hooks/event.ts";
 import {Icon} from "@iconify/vue";
 import Tooltip from "@/components/Tooltip.vue";
-import Options from "@/components/Practice/Options.vue";
-import Typing from "@/components/Practice/practice-word/Typing.vue";
-import Panel from "@/components/Practice/Panel.vue";
+import Options from "@/pages/practice/Options.vue";
+import Typing from "@/pages/practice/practice-word/Typing.vue";
+import Panel from "@/pages/practice/Panel.vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useWordOptions} from "@/hooks/dict.ts";
diff --git a/src/components/Practice/practice-word/index.vue b/src/pages/practice/practice-word/index.vue
similarity index 94%
rename from src/components/Practice/practice-word/index.vue
rename to src/pages/practice/practice-word/index.vue
index 25252887..d7e37ce6 100644
--- a/src/components/Practice/practice-word/index.vue
+++ b/src/pages/practice/practice-word/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import TypingWord from "@/components/Practice/practice-word/TypingWord.vue";
+import TypingWord from "@/pages/practice/practice-word/TypingWord.vue";
 import {$ref} from "vue/macros";
 import {chunk, cloneDeep} from "lodash-es";
 import {useBaseStore} from "@/stores/base.ts";
diff --git a/src/router.ts b/src/router.ts
new file mode 100644
index 00000000..26496217
--- /dev/null
+++ b/src/router.ts
@@ -0,0 +1,16 @@
+import * as VueRouter from 'vue-router'
+import Practice from "@/pages/practice/index.vue";
+import Dict from '@/pages/dict'
+
+const routes = [
+  {path: '/practice', component: Practice},
+  {path: '/dict', component: Dict},
+  {path: '/', redirect:'/dict'},
+]
+
+const router = VueRouter.createRouter({
+  history: VueRouter.createWebHashHistory(),
+  routes,
+})
+
+export default router
\ No newline at end of file