router-link를 통한 데이터 전달

작업간에 router-link를 통해 데이터를 전달해줄 일이 생겨 정확한 정보를 알아보기위해 이것저것 알아보던 도중 이해한 내용을 간략하게 정리해 보기로 했다.

router-link로 데이터를 전달하는 이유?

일반적으로는 컴포넌트 간에 데이터 통신을 props나 emit을 사용하여 전달한다 그렇지만 데이터를 전달해 줘야 하는 페이지가 상세페이지 라면..?

// 예) 특정 블로그에 쓰여진 댓글들을 확인하는 상세페이지 경로
        {
          name: 'BlogReply',
          path: 'blog/reply/:seq',
          component: () => import('@/views/blog/blogList'),
          meta: {
            title: 'BlogReply',
            parentName: 'BlogList'
          },
          props: true
        },

전달방법

router-link를 통해 데이터를 전달하는 방법은 두가지로 나눌 수 있다.
(path를 통해 페이지접속을 할 수 밖에 없는 경우에는 query를 사용)

1. query
query string형태로 전달되는 파라미터로 $route.query로 접근
{path: 'reply/${this.seq}', query: {nickName: 'lyju777', age: 28, reply:데이터전달}}

2. params
name 자체에는 path variable을 설정할 수 없음으로 name형태에서 파라미터를 전달할때 사용 $route.params로 접근
{name: 'BlogReply', params: {nickName: 'lyju777', age: 28, reply:데이터전달}}

params로 전달시 router 설정

query로 전달시에는 수정할 부분은 없지만 만약 params로 전달 시 $route.params로 접근하고 싶지 않다면 위의 상세페이지 router처럼 props: true를 설정하면 전달받는 페이지에서 props를 설정하여 일반적인 props처럼 사용이 가능하다.

(개인적으로 $route로 접근하는건 지저분하다고 생각한다..🤔)
created() 구간에서 초기값을 설정하여 this로 접근 할 수 있도록 깔끔하게 사용하는게 더 보기 좋은거 같음

query string

query로 전달시에는 url에 전달된 값이 보여지게 된다.

시작 - ?
다음 질의 - &
데이터 - 변수=값

Route와 Router의 차이

위에서 params나 query를 전달받아 접근시 $route 를 통해 접근하고 있는데

$router

Router 인스턴스로 웹 어플리케이션 전체에서 한가지만 존재한다
전반적인 내부 라우터 기능을 관리함.
예) $router.hisotory() $router.replace()

$route

Route 객체로 현재 활성화된 라우트의 상태를 저장한 객체임
페이지 이동 등으로 라우팅이 발생할 때마다 생성.
예) $route.query $route.params