Vue-라우터 사용법

라우터

• 라우팅: 웹 페이지 간의 이동방법, 주로 SPA에서 주로 사용함
• 라우팅 사용시 매끄러운 화면 전환 가능

 

Vue 라우터 관련 특수 태그

• <router-link to="URL">URL</router-link> : 페이지 이동에 사용하는 태그
• <router-view></router-view> : URL값에 따라 갱신되는 영역

<!-- script영역 -->
var view1 = {template:'<h1>view1</h1>'};
var view2 = {template:'<h1>view2</h2>'};

var routes = [
	{path: '/view1', component:view1},
    {path: '/view2', component:view2},
];

var router = new VueRouter({routes});
var app = new Vue({router}).$mount('#app'); <!-- mount는 el과 같은역할 -->

<!-- html영역 -->
<router-link to="/view1">view1</router-link>
<router-link to="/view2">view2</router-link>
<router-view></router-view>

view1 view2 링크를 클릭시 router-view영역이 변경되는 것을 확인할 수 있다.

 

 

네스티드 라우터와 네임드 라우터

• 네스티드 라우터: 상위 컴포넌트- 하위 컴포넌트로 구성된 라우터
• 네임드 라우터: 같은 레벨의 컴포넌트들로 화면을 구성하는 라우터
• 네스티드 라우터 안에는 router-view가 포함되는 형태를 가진다.

 

네스티드 라우터 (상위,하위)

<!-- script영역 -->
var A = {template:'<div>A영역<router-view></router-view></div>'};
var a = {template:'<p>a</p>'}
var b = {template:'<p>b</p>'}
var routes = [
	{
    	path:'/A',
        component: A,
        children:[
        	{path:'a',component:a},
            {path:'b',component:b},
        ]
    }
]


var router = new VueRouter({routes});
var app = new Vue({router}).$mount('#app');

<!-- html영역 -->
<router-view></router-view>

router-view태그가 html에도 있고 A의 템플릿 속에도 있다는 것을 확인

#/A로 첫 html접근 가능 -> #/A/a 로 변경시 A컴포넌트 속 a 컴포넌트가 적용된다는 것을 확인할 수 있다.

 

 

네임드 뷰

<!-- script영역 -->
var Body = {template:'<p>Body</p>'};
var Header = {template:'<p>Header</p>'}
var Footer = {template:'<p>Footer</p>'}

var routes = [
	{
    	path:'/',
        component: {
        	default:Body,
            header: Header,
            footer: Footer
        }
    }
]
var router = new VueRouter({routes});
var app = new Vue({router}).$mount('#app');

<!-- html영역 -->
<div id="app">
	<router-view name="header"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>
</div>