[vue.js] Router

싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리

<div id="app">
	<div>
		<router-link to="/login">Login</router-link>
		<router-link to="/main">Main</router-link>
	</div>
	<router-view></router-view>
</div>
<!-- 순서도 중요함, 뷰 다음 라우터 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>

<script>
	var LoginComponent= {
		template: '<div>login</div>'
	}

	var MainComponent= {
		template: '<div>main</div>'
	}

	var router = new VueRouter({
		// 페이지의 라우팅 정보가 들어감 (어떤 url로 이동했을때 어떤 페이지를 보여줄 것인지 배열로 들어간다)
		// 라우츠라는 속성에 배열이 들어가고, 페이지의 개수만큼 객체의 개수가 필요함
		routes: [
			// 로그인 페이지 정보
			{
				// 페이지의 url
				path: '/login',
				// 해당 url에서 표시될 컴포넌트
				component: LoginComponent
			},
			// 메인 페이지 정보
			{
				path: '/main',
				component: MainComponent
			}
		]
	});

	new Vue({
		el: '#app',
		router: router
	});
</script>

router-view

페이지의 url이 이동했을 때 그 범위내에서 뿌려주는 태그

router-link

사용자에게 라우팅 된 경로로 이동하게끔 앵커태그를 생성하는 속성

<router-link to="/main">main</router-link>
<!-- convert -->
<a href="#/main">main</a>

to속성에 동적으로 라우팅 경로를 생성시킬 수 있음

<router-link v-bind:to="`/user/${item.username}`">User-Info</router-link>