Vue Router

heejung·2022년 2월 6일

Vue.js

목록 보기

5/8

뷰 라우터를 이용하여 클라이언트의 요청 경로에 따라 해당하는 컴포넌트를 불러와 페이지를 구성할 수 있다. URL 변경 시 DOM을 새로 갱신하는 게 아니라 미리 컴포넌트를 가지고 있다가 변경된 요소영역만 갱신한다. (SPA) vue에서는 vue-router라는 라우팅 라이브러리를 지원한다.

라우터 설치

npm install vue-router

라우터 속성

라우터 인스턴스를 생성할 때 설정하는 값들이다.

String mode : 기본 값은 Hash 모드 (history 모드를 사용하면 브라우저 히스토리 스택에 기록된다.)
String redirect : 리다이렉팅 (주로 메인 페이지 등에 사용한다.)
array routes : 페이지 라우팅 정보
String path : 페이지 경로 (url)
Object component : 해당 url 페이지에 사용 할 컴포넌트
Array children : 중첩 라우팅을 위한 배열

라우터 생성

vue-router를 import해서 라우터 인스턴스를 새로 생성한다.

//📁router/router.js

 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import Main from '../views/Main.vue';
 import Info from '../views/Info.vue';
 
 Vue.use(VueRouter);
 
 const router = new VueRouter({
	mode:'history', //해쉬값 제거 방식
    routes: [{
        path: '/', 
        redirect: '/home' 
    }, {
        path: '/home',
        component: Main
    }, {
        path: '/Info',
        component: Info
    }]
});

//📁main.js

import Vue from 'vue';
import App from './App.vue';
import {router} from './router/index.js';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

렌더링

라우터를 생성한 컴포넌트에 router-view 태그를 선언하면 URL에 맞게 컴포넌트들이 매핑된다.
/home은 Main 컴포넌트를, /info는 Info 컴포넌트를 화면에 뿌려준다.

<template>
	<div id="app">
		<router-view></router-view>	
	</div>
</template>

라우터 링크

router-link 속성을 통해 사용자에게 라우팅 된 경로로 이동할 수 있게 한다. to 속성에 동적으로 라우팅 경로를 생성시킬 수 있다.

<router-link to="/home"></router-link>

위 코드를 실행하면 화면에서는 <a> 태그로 변형되서 나온다.

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

v-bind 속성은 동적 경로를 생성하고 싶을 때 유용하다.

동적 라우팅

특정 패턴을 가진 경로들을 동일한 컴포넌트에 매핑해야 할 경우 사용하는 기법이다.

import AskItem from '../views/PostItem.vue';
const router = new VueRouter({
	routes: [{
		path : '/post/:id'
        component : PostItem
	}]
7});

위 코드와 같이 라우터를 정의하면 path에서 콜론(:)으로 시작하는 부분(동적 세그먼트)이 다르더라도 같은 경로에 매핑된다. 따라서 /post/1과 /post/2와 같은 URL이 모두 PostItem 컴포넌트를 보여주게 된다.

:id 에 해당하는 값은 다음과 같이 해당 컴포넌트에서 this.$route.params 를 통해 가져와서 활용할 수 있다.

// PostItem.vue

<template>
  <h1>{{ $route.params.id }}</h1>
</template>

라우터 네비게이션 메소드

router-link 로 웹 페이지 이동을 위한 <a> 태그를 만드는 방법 말고도 프로그래밍적으로 페이지를 이동할 수 있는 메소드가 있다.

router.push()

router.push(location, onComplete?, onAbort?)

onComplete와 onAbort는 콜백 함수로,
onComplete는 네비게이션이 성공적으로 완료되었을 경우 호출된다. onAbort는 현재 네비게이션이 완료되기 전 동일한 경로로 이동하거나 다른 경로로 이동될 때 호출된다.

router-link의 to 속성과 같다. 히스토리에 현재 페이지를 저장한 뒤 인자로 전달받은 URL(location)로 이동한다.

// string 전달
this.$router.push('home'); 

// object 전달  
this.$router.push({ path: 'home' }); 

// query와 함께 전달 → /user?id=captain
this.$router.push({ path: 'user', query: { id: 'captain' } });

router.replace()

router.replace(location, onComplete?, onAbort?)

히스토리에 현재 페이지를 저장하지 않고 이동한다. 히스토리에 경로가 남지 않으므로 백스페이스키를 눌렀을 때 원래 페이지로 돌아올 수 없다. 이름에 나타나듯이 현재 페이지가 다른 페이지로 대체되는 것이다.

router.go()

router.go(n)

히스토리 스택에서 앞 또는 뒤로 전달된 인자(정수)만큼 이동한다.

this.$router.go(-1); // 이전 페이지로 이동
this.$router.go(1);  // 다음 페이지로 이동

라우터 메타 필드

라우터를 정의할 때 meta 필드를 통해 원하는 메타 정보를 입력할 수 있다. 로그인이 필요한 라우팅인지 아닌지 구분해야 하는 경우에 활용될 수 있다.

new VueRouter({
  routes: [
    // authRequired: true 라는 메타 필드 입력
    { path: '/orders', component: OrdersComponent, meta: { authRequired: true } }
  ]
})