라우터 네비게이션 가드

데이터를 호출 시점은 여러가지가 존재한다. 대표적으로 라이프 사이클 중 하나인 created와 지금 소개할 라우터 네이게이션 가드가 존재한다. 상황에 따라
적절한 위치에서 데이터를 호출 해서 사용 하면 된다.

정의

라우터 네비게이션 가드란 vue-router가 제공하는 기능으로 주로 리다이렉션 또는 라우터 이동을 취하여서 네비게이션을 보호하는데 사용한다. 라우터 네비게이션 가드는
created보다 먼저 호출이 된다.

사용방법

라우터에서 직접 사용

1
2
3
4
5
6
7
8
9
10
11

var routed = {
    routes : [{
        path: 'list',
        name: 'list',
        beforeEnter: (to, from, next) => {
            console.log('to', to);      // 현재 이동하고자 하는 url 정보
            console.log('from', from);  // 현재 url 정보
            console.log('next', next);  // next함수를 호출해야 이동하고자 하는 url로 접속 가능
        }
    }]
}

params 또는 쿼리의 변경에 의해서는 가드가 실행되지 않는다.

next의 사용

1. next()

네이게이션을 승인 해준다. 라우터의 URL 이동을 허락 해준다.

2. next(false)

네이게이션을 중단한다. from 경로의 URL로 재설정된다.

3. next(‘/‘) or next({path : ‘/‘})

다른 위치로 리다이렉션 해 준다.

4. next(error)

next에 전달된 인자가 Error의 인스턴스이면 탐색 중단 및 router.onError()를 이용해 등록 된 콜백에 에러가 전달 된다.

가드의 종류

1. 전역 가드 : beforeEnter

2. 글로벌 가드 : beforeResolve, afterEach

3. 내부가드 : beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

내부가드는 router가 아닌 컴포넌트 안에 직접 네비게이션 가드를 정의할수 있다.

beforeRouterEnter는 해당 가드 생성시에 컴포넌트 생성 전이라 this에 접근이 불가능하다.

1
2
3
4
5
6
7

var component = {
    beforeRouteEnter(to, from, next) {
        next(vm => {
            // 'vm'을 통한 컴포넌트 인스턴스 접근이 가능하다.
        })
    }
}

beforeRouteLeave는 this에 직접 접근이 가느하다. 사용자가 저장하지 않는 편집 내용을 두고 라우트를 떠나는 것을 방지할때 사용한다.

전체 네비게이션 시나리오

1
2
3
4
5
6
7
8
9
10
11
12

1) 네비게이션이 트리거됨.
2) 비활성화될 컴포넌트에서 가드를 호출.
3) 전역 beforeEach 가드 호출.
4) 재사용되는 컴포넌트에서 beforeRouteUpdate 가드 호출. (2.2 이상)
5) 라우트 설정에서 beforeEnter 호출.
6) 비동기 라우트 컴포넌트 해결.
7) 활성화된 컴포넌트에서 beforeRouteEnter 호출.
8) 전역 beforeResolve 가드 호출. (2.5이상)
9) 네비게이션 완료.
10) 전역 afterEach 훅 호출.
11) DOM 갱신 트리거 됨.
12) 인스턴스화 된 인스턴스들의 beforeRouteEnter가드에서 next에 전달 된 콜백을 호출합니다.

Comment and share

라우터 트랜지션

화면 전환시에 좀더 부드럽게 이동하도록 해준다. 실제로 화면전환시에 애니메이션을 넣어주는 건 아니고 화면전환시마다 적절한 class를 부여해주는데
해당 class에 css로 직접 원하는 애니메이션을 작성하면 된다.

1
2
3

<transition>
    <router-view></router-view>
</transition>

1. router-view 태그를 transition 태그로 감싼다.
2. transition은 라우터 트랜지션 이외에도 사용가능하다.

Comment and share

라우터 객체

router 객체

라우터 객체를 이용한 주소변경

앞서서 <view-link to="">를 활용한 주소변경에 대해서는 알아보았습니다. 하지만 때론 자바스크립트로 주소변경을 해야 하는 경우가 발생할수 있습니다.
이런 경우에는 this.$router.push('주소')을 이용하여 주소를 이동할수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<button @click="onClik">클릭</button>

<script>
export default {
    methods: {
        onClick() {
            this.$router.push('주소');
            this.$router.push({path : '주소'});
            this.$router.push({path : '주소', params: {id: 123}});
            this.$router.push({path : '주소', query: {id: 123}});   // query를 사용하는 경우 주소창에 /주소?id=123으로 출력
        }
    }
}
</script>

히스토리 목록에 추가하지 않고 주소 변경

push를 이용하면 히스토리 목록에 추가가 됩니다. 하지만 replace를 이용하면 목록에 추가 되지 않습니다.($router.go 메서드를 이용해서 이전 주소로 이동이 불가능합니다.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<router-link to="주소" replace></router-link>   <!-- 선언적 방식은 속성으로 replace를 추가 -->

<script>
export default {
    methods: {
        onClick() {
            this.$router.replace('주소');
            this.$router.replace({path : '주소'});
            this.$router.replace({path : '주소', params: {id: 123}});
            this.$router.replace({path : '주소', query: {id: 123}});   // query를 사용하는 경우 주소창에 /주소?id=123으로 출력
        }
    }
}
</script>

$router는 VueRouter인스턴스 입니다.

route 객체

$route.params

동적라우팅으로 데이터를 받거나 push등을 통해서 params에 데이터를 저장한 경우에 this.$route.params.데이터를 통해서 데이터를 얻어 올수 있습니다.

1
2
3
4
5
6
7

<script>
export default {
    created() {
        this.$route.params.데이터
    }
}
</script>

$route.query

push등을 통해서 query에 데이터를 저장한 경우에 this.$route.query.데이터를 통해서 데이터를 얻어 올수 있습니다.

1
2
3
4
5
6
7

<script>
export default {
    created() {
        this.$route.query.데이터
    }
}
</script>

Comment and share

동적 라우팅

블로그 주소를 /post/포스트번호로 설계하여 포스트번호가 동적으로 변화하여야 하는 경우에는 동적으로 라우팅을 설정해야 합니다. 동적으로 주소를 사용할땐 주소 앞에 :를 사용합니다.

동적 라우팅 구성

1
2
3
4
5
6

var routes = [
    {
        path: '/post/:postId',
        component: {template: '<p>포스팅입니다.</p>'}
    }
];

/post/001, /post/002 처럼 동적으로 접근 가능
게시판에서 게시글 상세보기 접근할때 해당하는 동적 주소 사용 가능

동적 라우팅으로 구성한 데이터 접근

동적으로 작성된 주소의 데이터는 this.$route.params.데이터명 으로 접근이 가능합니다.

1
2
3
4
5
6
7

<script>
export default {
    created() {
        this.$route.params.postId
    }
}
</script>

props로 데이터 접근

동적 라우팅으로 구성한 데이터를 props로 가져 올수 있다. this.$route.params.데이터명로 하면 라우트와의 의존성이 높아지므로 props를 활용하는게 좋다.

1
2
3
4
5
6
7

var routes = [
    {
        path: '/post/:postId',
        component: {template: '<p>포스팅입니다.</p>'},
        props: true
    }
];

URL에 동적 데이터 구성 이외에도 queryString 방식도 이용 가능 하다.

1. url 작성

1

url : /user?id=userId

2. 라우터 작성

1
2
3
4

var routes = [{
    path: '/user'
    component: 컴포넌트
}]

3. 값 받아오기

1

this.$route.query.id

4. props로 받아오기

키가 id 값을 props에 userName이라는 키로 변환하여 보내주고 있다.

1
2
3
4
5

var routes = [{
    path: '/user'
    component: 컴포넌트,
    props: (route) => ({userName: route.query.id})
}]

Comment and share

뷰 라우터

싱글페이지앱에서는 화면의 새로고침이 없이 페이지가 전환이 되어야 합니다. 그럴때 사용하는 것이 뷰 라우터로써 라우트에 컴포넌트를 맵핑 시켜 놓고 특정주소에서 해당하는 컴포넌트를 렌더링하는 방식으로 싱글페이지앱에서 페이지의 전환을 대신합니다.

1. vue-router 구성

1-1. vue-router파일 작성

참고사항

vue-router의 실제 코드를 main.js에 작성하게 되면 vue-router 편향적인 파일이 되기 때문에 삼가한다. vue-router만을 위한 파일을 생성하여 작성하도록 하자.

vue-router 설치

1

npm install vue-router

import

1
2
3
4

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

컴포넌트 생성

렌더링할 컴포넌트 생성

1
2

const Foo = {template: '<p>foo</p>'}
const Bar = {template: '<p>bar</p>'}

VueRouter 생성

path는 주소, component는 해당 주소에서 렌더링할 컴포넌트를 맵핑

1
2
3
4
5
6
7
8

let routes = [
    {path: '/foo', component: Foo},
    {path: '/bar', component: Bar}
]

export const router = new VueRouter({
    routes
});

1-2. main.js 작성

Vue 인스턴스 생성

1
2
3
4
5

import {router} from '라우터작성 경로';

new Vue({
    router
})

뷰 라우터 태그 작성

라우터 설정시에 맵핑했었던 컴포넌트가 router-view에 렌더링 됩니다.

1
2
3

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

라우터 이동

path부분에 주소를 입력 해주면 해당 라우팅 경로로 이동할수 있습니다(실제론 해당 주소로 컴포넌트를 바꿔서 렌더링 작업을 처리해준다는 것).

1
2
3

<div id="app">
    <router-link to="path"></router-link>
</div>

redirect

path 경로로 들어왔을 때 리다이렉트 할수 있다.

1
2
3
4
5
6

var routes = [
    {
        path: '/',
        redirect: '/리다이렉트할 경로'
    }
]

url에 # 제거하기

mode에 history값을 주면 #을 제거 가능하다.

1
2
3
4
5
6

new VueRouter({
	mode : history,
	routes : [
	
	]
})

2. 심화된 라우팅 구성

중첩된 라우트

중첩된 라우트를 사용하기 위해서는 children 속성을 이용하면 가능합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var routes = [
    {
        path: '/mypage',
        component: {template: '<p>안녕하세요</p><router-view></router-view>'},
        
        // 중첩된 라우트를 사용하기 위해서는 children 속성을 이용하면 가능합니다.
        children: {
            path: 'myBoard',
            component: {template: '<p>내 게시물</p>'}
        }
    }
]

new VueRouter({
    routes
})

중첩된 라우트는 화면 구성 컴포넌트의 수가 적으면 유용하지만 한번에 더 많은 컴포넌트를 표시하는데는 한계가 있습니다.

다중 라우트

하나의 주소에 여러개의 컴포넌트와 매핑을 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<view-router></view-router>
<view-router name="header"></view-router>

var routes = [
    {
        path: '/mypage',
        components: {
            default: {template: '<p>기본 컴포넌트</p>'},        // view-router에 name속성의 값을 설정하지 않으면 default
            header: {template: '<header>헤더 컴포넌트</header>'}    // view-router에 name속성의 값을 키로 하여 컴포넌트를 맵핑
        }
    }
];

new VueRouter({
    routes
});

상하위 관계가 아닌 동등한 레벨의 여러개의 컴포넌트를 한번에 표시가 가능합니다.

Comment and share