diff --git a/package-lock.json b/package-lock.json
index 7e7995dd8e..24da34d4f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2498,6 +2498,11 @@
         "@vue/shared": "3.0.0-rc.2"
       }
     },
+    "vue-router": {
+      "version": "4.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-beta.2.tgz",
+      "integrity": "sha512-+TvUCpxEhgSCssMTXdX4qei/YZN1kEt4nZoOySPLLUlAeEIlY3K1ps3hyCOeC1qYGCuSwaWuDmK/yi2d7W0sSg=="
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
diff --git a/package.json b/package.json
index 3657b87468..1ce2943dd7 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "build": "vite build"
   },
   "dependencies": {
-    "vue": "^3.0.0-rc.1"
+    "vue": "^3.0.0-rc.1",
+    "vue-router": "^4.0.0-beta.2"
   },
   "devDependencies": {
     "vite": "^1.0.0-rc.1",
diff --git a/src/App.vue b/src/App.vue
index 0e9019f667..c7157bba29 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,11 @@
 <template>
-  <el-button>Button</el-button>
+  <div id="app">
+    <router-view />
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/button">Button</router-link>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/component.js b/src/component.ts
similarity index 100%
rename from src/component.js
rename to src/component.ts
diff --git a/src/components/button/doc/index.vue b/src/components/button/doc/index.vue
new file mode 100644
index 0000000000..2319302fd9
--- /dev/null
+++ b/src/components/button/doc/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <el-button>button text</el-button>
+</template>
+
+<script>
+export default {
+  
+}
+</script>
diff --git a/src/main.js b/src/main.js
index b2adb7f282..7f13055067 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,10 @@
 import { createApp } from 'vue'
-import { installAll } from './component.js'
+import { installAll } from './component.ts'
+import router from "./router.ts";
 import './style/element-ui@2.13.2.css'
 import App from './App.vue'
 
 const app = createApp(App)
 installAll(app)
+app.use(router)
 app.mount('#app')
diff --git a/src/router.ts b/src/router.ts
new file mode 100644
index 0000000000..1017e6a5db
--- /dev/null
+++ b/src/router.ts
@@ -0,0 +1,16 @@
+import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
+import Button from "./components/button/doc/index.vue";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/button",
+    component: Button
+  }
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+});
+
+export default router;
\ No newline at end of file