[vue.js]vue-router 튜토리얼-2

개요

jquery나 pure js로 개발된 페이지는 사용자가 매 번 요청하는 경로가 달라지면, 서버에서 페이지 자원을 다시 받아오게 됩니다. 받아오는 동안에도 시간이 걸리기 때문에 화면이 번쩍하면서 랜더링이 됩니다. 반면어 spa는 사용자가 처음 애플리케이션에 접속할 때 보내는 서버 요처으로 애플리케이션에 필요한 자원을 모두 받아옵니다. 사용자가 경로를 다르게 요청하면, 서버에 다시 페이지 자원을 요청하지 않습니다. 처음에 받아온 script 파일로 동적으로 페이지를 변환합니다. 덕분에 서버는 해당 경로에 페이지에 필요한 데이터만 브라우저에 전송해 주면되므로, 서버에 부담이 덜 하게 됩니다.

 

그럼, 브라우저에서는 어떻게 동적으로 경로에 맞는 페이지를 랜더링해주는 걸까요?

vue에서는 사용자가 요청한 경로에 매칭되는 컴포넌트를 import 해주는 vue-router라는 라이브러리를 사용해서 페이지를 동적으로 랜더링해주게 됩니다.

 

이번 글은 총 3개의 주제로 vue-router를 알아보고자 합니다.

1. vue-router 설치 및 기본 사용법

2. vue-router params와 query를 사용해서 이동할 컴포넌트에 데이터 넘겨주기

3. vue-router 중첩 라우터 구현 방법

 

 

경로에 매칭되는 컴포넌트에 데이터를 넘겨주는 방법을 알아보겠습니다.

 

router를 통해서 data를 컴포넌트에 넘겨주게 되면, 서버에서 다시 데이터를 요청한다거나 복잡한 연산을 다시 실행하지 않아도 되게됩니다. 작성할 코드도 줄고, 서버에 불필요한 요청을 보내고 받는 트래픽도 줄일 수 있으니, 적절하게 사용해 줍니다.

 

구현

이동할 경로에의 매칭되는 컴포넌트로 데이터 전달은 가능합니다. 하지만, 이동한 컴포넌트가 route 객체를 통해서 넘겨받은 데이터에 의존할 경우, 이동한 경로에서 새로고침을 하게 되면, 컴포넌트가 정상적으로 실행되지 않습니다.

이 점을 감안하시고 사용해야 합니다.

그리고, query로 요청할 경우, query는 url에 노출됩니다.

 

router 변경을 요청하는 방법은 다음과 같습니다.

template에서 이동할 수도 있고, 

<template> 
    <div> 
        <div @click="$router.push("/dashboard")">Move Page!</div> 
        // or 
        <div @click="$router.push({ name: 'dashboard'}">Move Page!</div> 
        // or 
        <router-link :to="{ name: 'dashboard'}">User</router-link> 
        // or 
        <router-link :to="/dashboard">User</router-link> 
    </div> 
</template>

script 코드 상에서 이동을 요청할 수도 있습니다.

<script>
  export.default {
    methods: {
      moveRoute() {
        this.$router.push('/dashboard');
      }
    }
  }
</script>

 

데이터 전달 구현

이동될 라우터로 데이터를 전달하려면, 위에 소개한 경로 요청을 👇아래 형식의 객체 형태로 요청을 해야합니다.

{
    name: '라우터 이름',
    query: {전달할 쿼리},
    params: {전달할 파라미터}
}

 

탬플릿에서 구현

<template> 
    <div> 
        <div @click="$router.push({ name: 'dashboard', params: {mode: 'dashboard'}, query: {mode: 'dashboard'}}">Move Page!</div> 
        // or 
        <div @click="$router.push({ name: 'dashboard', params: {mode: 'dashboard'}, query: {mode: 'dashboard'}}">Move Page!</div> 
        // or 
        <router-link :to="{ name: 'dashboard', params: {mode: 'dashboard'}, query: {mode: 'dashboard'}}">User</router-link> 
        // or 
        <router-link :to="{ name: 'dashboard', params: {mode: 'dashboard'}, query: {mode: 'dashboard'}}">User</router-link> 
    </div> 
</template>

 

스크립트에서 구현

<script>
  export.default {
    methods: {
      moveRoute() {
        this.$router.push({name: 'dashboard', params: {mode: 'dashboard'}, query: {mode: 'dashboard'}});
      }
    }
  }
</script>

 

query와 params 차이점

	query	params
사용 방법	this.$router.push({name: '', query: {}])	this.$router.push({name: '', params: {}})
차이점	- url 쿼리에 추가됨 ex) 호스트?boardId=''&boardNumber=""	- url 경로로 추가됨 ex) 호스트/boardId/boardNumber

 

 

컴포넌트에서 데이터 호출방법

this.$route.params.객체 키
this.$route.query.객체 키

 

사용 예시

router 이동 요청하면서 params과 query 동시에 전달하기

 

router push 요청 후, 브라우저 상태

http://localhost:9002/chart/edge/Edge-2?id=Edge-2&ip=192.168.0.103&name=Edge.103-serverroom&port=50001&connectId=SYS&connectPass=MANAGER&connectHttpPort=5657

 

route 컴포넌트에서 사용

 

 

다음 글 보기

👉 1. [vue.js] vue-router 튜토리얼 -1

👉 3. vue-router 중첩 라우터 구현 방법