<div id="readability-page-1" class="page"><div><h2 id="목표">목표</h2>
그림과 같이 한개의 페이지를 type에 따라 재활용하려고 한다. 
<img src="https://media.vlpt.us/images/eunjeong/post/94a24d54-e9bd-4461-adf6-5627164d37da/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-11%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.31.52.png">
<h2 id="과정">과정</h2>
수정해야 할 파일은 총 3개 입니다. 
1. 이동 전 페이지 
2. 이동 후 페이지 (ModifyProfile.vue) 
3. Router 파일
<h3 id="1-이동-전-페이지">1. 이동 전 페이지</h3>
여기서 주의할 점은 name 작성입니다. 
key는 type, value는 id를 넘겨줍니다. 
❗️name의 값은 router name값과 일치하도록 작성합니다.
<pre><code>this.$router.push({name: 'modifyProfile', params: { type: id } });</code></pre>
<h3 id="2-이동-후-페이지-modifyprofilevue">2. 이동 후 페이지 (ModifyProfile.vue)</h3>
<pre><code>export defualt{
	props:["type"]
}
</code></pre>
<h3 id="3-router-파일indexjs">3. Router 파일(index.js)</h3>
여기서 주의할 점은 name, props 작성입니다. 
❗️name의 값은 이동 전 페이지 name값과 일치하도록 작성합니다.
<pre><code>const routes = [
 {
 path: "/modifyProfile",
 name:"modifyProfile",
 props:true,
 component: () =&gt; import("../views/ModifyProfile.vue"),
 },
]
</code></pre>
<h2 id="결과">결과</h2>
<img src="https://media.vlpt.us/images/eunjeong/post/d154d66e-4f8b-4a35-b1d9-4f0a75ef68ef/router.gif"></div></div>

eunjeong.log

목표
그림과 같이 한개의 페이지를 type에 따라 재활용하려고 한다.
과정
수정해야 할 파일은 총 3개 입니다.
이동 전 페이지
이동 후 페이지 (ModifyProfile.vue)
Router 파일
1. 이동 전 페이지
여기서 주의할 점은 name 작성입니다.
key는 type, value는 id를 넘겨줍니다.
❗️name의 값은 router name값과 일치하도록 작성합니다.
this.$router.push({name: 'modifyProfile', params: { type: id } });
2. 이동 후 페이지 (ModifyProfile.vue)
export defualt{
    props:["type"]
}
3. Router 파일(index.js)
여기서 주의할 점은 name, props 작성입니다.
❗️name의 값은 이동 전 페이지 name값과 일치하도록 작성합니다.
const routes = [
  {
    path: "/modifyProfile",
    name:"modifyProfile",
    props:true,
    component: () => import("../views/ModifyProfile.vue"),
  },
]
결과

[TIL] Vue Router props

댓글