Vue - 동적 라우터

동적 라우터에 대한 공식문서는 https://router.vuejs.org/guide/essentials/dynamic-matching.html 요기있다. 

 

동적 라우터의 핵심은 특정 페이지의 정보를 가지고 다음 페이지를 이동할 수 있다는 것 이다.

//routes하단의 index.js 

{

	path:'/basic/:id',
    component:BasicView

}



//BaicView로 넘어갈 컴포넌트 코드에서 router-link를 이용한다.
//<router-link> 와 <a> 의 차이 알아보기

특정 라우터로 이동할 때 위처럼 path: '/bacsic/:id'  -> :id 이렇게 해준다면.. params에 id값이 넘어가게 된다.

<template>
	<div>
    	<router-link :to="`/basic/${basicId}`">click</router-link>
    </div>
</template>

위 코드와 같이 router-link 로 to 에 해당 click를 눌렀을때 이동하고 싶은 url을 넣어주면 된다. 

뒤에 basicId눈 BasicView 컴포넌트가 렌더링 될때 path의 :id값으로 들어가게 된다.  

($route의 params 의 id 를 보면 해당 basicId가 넘어온 것을 볼 수 있다.)