diff --git a/components.d.ts b/components.d.ts
index e7332ca012cb202d5b4ca9222ab72b4967cec87b..310c16b80fc098a36e5d35dba08bd0569c0425dc 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,5 +9,8 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ElOption: typeof import('element-plus/es')['ElOption']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
   }
 }
diff --git a/package.json b/package.json
index a89b21dd58681b41b0dbd71fef040a4452aaf07e..aac55610684d72e7eb7a68b8e5b57fc1ca33c1fc 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "unplugin-auto-import": "^0.11.0",
     "unplugin-vue-components": "^0.22.0",
     "vite": "^3.0.0",
+    "vue-router": "^4.1.3",
     "vue-tsc": "^0.38.4"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 2aeca5aa3cc2d403e4055bb249c580ffd3de2a24..4d0a6d8f2e9d8616f726cc205243842bfa13e370 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,45 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-const value = ref('')
-const options = [
-  {
-    value: 'Option1',
-    label: 'Option1',
-  },
-  {
-    value: 'Option2',
-    label: 'Option2',
-    disabled: true,
-  },
-  {
-    value: 'Option3',
-    label: 'Option3',
-  },
-  {
-    value: 'Option4',
-    label: 'Option4',
-  },
-  {
-    value: 'Option5',
-    label: 'Option5',
-  },
-]
 </script>
 
 <template>
-  <div class="header"></div>
-  <el-select v-model="value" placeholder="Select">
-    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
-      :disabled="item.disabled" />
-  </el-select>
-
+  <router-view></router-view>
 </template>
 
-<style lang="scss">
-.header {
-  width: 1.25rem;
-  height: 1.25rem;
-  background: $bg-color;
-}
+<style>
 </style>
diff --git a/src/main.ts b/src/main.ts
index f2bb45f333c20836f769e8e2a6f83fdb03b572eb..a1338cc78d793b643f8da5d82291c6b84760e033 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,9 +2,18 @@ import { createApp } from 'vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import { createPinia } from 'pinia'
+import { createRouter, createWebHistory } from 'vue-router'
 import './style.css'
 import App from './App.vue'
 let app = createApp(App);
+let routes = [
+  { path: '/', component: () => import('./views/main.vue') }
+]
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
 app.use(createPinia);
 app.use(ElementPlus);
+app.use(router)
 app.mount('#app');
\ No newline at end of file
diff --git a/src/views/main.vue b/src/views/main.vue
index 67f93cb42db6885888073ec33173b49905c94b51..2a078eb298a285d1b2bae29da6f7c2e9c4ae8bc4 100644
--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -1,11 +1,45 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 
+const value = ref('')
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+    disabled: true,
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
 </script>
 
 <template>
-  
-</template>
+  <div class="header"></div>
+  <el-select v-model="value" placeholder="Select">
+    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
+      :disabled="item.disabled" />
+  </el-select>
 
-<style scoped>
+</template>
 
+<style scoped lang="scss">
+.header {
+  width: 1.25rem;
+  height: 1.25rem;
+  background: $bg-color;
+}
 </style>
diff --git a/yarn.lock b/yarn.lock
index bf976cf436f56c7089a92c19e2fe0416c0786937..6054ea8667bb28fe5ed6d9109c2e9a1733798405 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -176,7 +176,7 @@
     "@vue/compiler-dom" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/devtools-api@^6.2.1":
+"@vue/devtools-api@^6.1.4", "@vue/devtools-api@^6.2.1":
   version "6.2.1"
   resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
   integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
@@ -876,6 +876,13 @@ vue-demi@*:
   resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.6.tgz#f9433cbd75e68a970dec066647f4ba6c08ced48f"
   integrity sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==
 
+vue-router@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-4.1.3.tgz#f8dc7931a2253cc5aa9b740f8b98969d08ca283c"
+  integrity sha512-XvK81bcYglKiayT7/vYAg/f36ExPC4t90R/HIpzrZ5x+17BOWptXLCrEPufGgZeuq68ww4ekSIMBZY1qdUdfjA==
+  dependencies:
+    "@vue/devtools-api" "^6.1.4"
+
 vue-tsc@^0.38.4:
   version "0.38.9"
   resolved "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-0.38.9.tgz#9e945937667f704325328db8af1cc6bc7314b85e"