diff --git a/src/App.vue b/src/App.vue
index 500a5531e6c6a6ff2b1988ba6d12341878207858..05dab7dc23c866ffa0ee91ad63b52be9d4fce3a1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <div id="nav">
     <router-link to="/">Home</router-link> |
     <router-link to="/about">About</router-link> |
-    <router-link to="/mypage">MyPage</router-link>
+    <router-link to="/mypage/Punyanuch">MyPage</router-link>
   </div>
   <router-view/>
 </template>
diff --git a/src/router/index.js b/src/router/index.js
index e8b7b8400d1ab318cab7e33fbe60190b395a05c3..b6abbe129963dc1fb2dd996d3eb504b2533bb172 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,9 +17,10 @@ const routes = [
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },
   {
-    path: '/mypage',
+    path: '/mypage/:name',
     name: 'MyPage',
-    component: () => import('../views/MyPage.vue')
+    component: () => import('../views/MyPage.vue'),
+    props: true
   }
 ]
 
diff --git a/src/views/MyPage.vue b/src/views/MyPage.vue
index 0524554b8b8a3867b0fd3ae3054f7099546a2a6e..4ac63dede04599ffefafa0fc7adbaff1340cce17 100644
--- a/src/views/MyPage.vue
+++ b/src/views/MyPage.vue
@@ -1,9 +1,12 @@
 <template>
   <div>
-      <h1>MyPage</h1>
+    <h1>MyPage</h1>
+    <h3>{{ name }}</h3>
   </div>
 </template>
 <script>
-export default {}
+export default {
+  props: ['name']
+}
 </script>
 <style></style>