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>