B.TIL 05 : history를 이용한 컴포넌트 이동(뒤로가기 등)

history mode의 특징

이전 게시물에 언급했다싶이 히스토리 모드는 다음과 같은 특징을 가지고 있다.

1) 해쉬뱅 모드와 달리 링크에 #이 붙지않는다.
2) 라우터를 사용해 컴포넌트를 이동(교체)할 때 마다 스택이 쌓인다.

이 중 히스토리 모드의 두 번째 특징과 라우터 메소드를 사용하면 뒤로가기, 홈으로 가기 같은 기능을 구현 할 수 있다.

구현방법

//src/components/button.vue

<template>
        <div id="btn_group"> 
            <button @click="goFront" type="button">FRONT</button> [1]
            <button @click="goBack" type="button">BACK</button> 
            <button @click="goHome" type="button">HOME</button> 
        </div> 
</template>

<script>
export default {
    methods:{
        goFront(){
            this.$router.go(1);
        },
        goBack(){
            this.$router.go(-1); [2]
        },
        goHome(){
            this.$router.push('/'); [3]
        }
    }
}
</script>

<style>

</style>

[ 1 ] : 각각의 버튼에 @click = v-on:click = '클릭이벤트' 시 각각의 메소드가 발생하게끔 하면 된다.

[ 2 ] : this.$router.go 메소드는 히스토리 스택의 연산을 이용해 이전 해당 컴포넌트를 렌더링해준다. go(-1)의 경우 바로 이전에 렌더링 됬던 컴포넌트를 재 렌더링 해준다.

[ 3 ] : this.router.push 메소드는 프로그래밍방식 네비게이션에 속한다.
router-link to="/home" 메소드의 경우 클릭할 때 내부적으로 호출되는 메소드 므로 router-link to="/home"를 클릭하면 this.router.push("/home")를 호출하는 것 과 같다.

라우터 푸시를 쓰는 방식은 매우 다양하므로 공식문서를 참조하도록 하자. 이번 경우에는 가장 간단한 리터럴 스트링 방식을 사용했다.

이러한 코딩으로 앞으로 가기, 뒤로가기, 홈으로 가기 버튼을 구현해보았다.