[Vue] Router

1. Router

라우터는 컴포넌트와 매핑되어 vue를 이용한 SPA(Single Page Application)를 제작할 때 유용하다.

URL에 따라 컴포넌트를 연결하고 설정된 컴포넌트를 보여준다.

 

2. 설치

cdn 방식이다.

<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>​

모듈 시스템에서 사용하면 Vue.use()를 사용해서 명시적으로 라우터를 추가해야 한다.

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

Vue.use(VueRouter)

 

3. 연결 - 선언적 네비게이션

HTML

1. router-link

네비게이션을 위해 router-link 컴포넌트를 사용한다.

to를 이용해 구체적인 속성을 지정한다.

이름으로 지정할 수도 있고, 링크로 지정할 수도 있다.

query나 params를 같이 보낼 수 있다.

router-link는 a태그로 렌더링된다.

2. router-view

router-view 는 라우터 아울렛이다.

현재 라우트에 맞는 컴포넌트가 렌더링된다.

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="{name:'bar'}">Go to Bar</router-link>
    <router-link to="{path:'register', query:{plan:'private'}, params:{userId:123}}">Register</router-link>
  </p>
  <router-view></router-view>
</div>

 

app.js

1.  라우트 컴포넌트를 정의한다. 다른 파일로부터 가져올 수도 있다.

2.  라우터 인스턴스를 만든다. route에 컴포넌트와 path를 매핑한다. name을 설정할 수도 있다.

3.  루트 인스턴스를 만들고 router를 주입한다.

const Foo = { template: '<div>foo</div>' }
import Bar from '파일';

const router = new VueRouter({
  routes : [
    { path: '/foo', component: Foo, name:'foo' },
    { path: '/bar', component: Bar, name:'bar' }
  ]
});

const app = new Vue({
  el:"#app",
  router
});

 

$router, $route

$router : 전체 라우터 정보

$route : 현재 호출된 해당 라우터 정보

라우터 설정

주소로 보내는 params를 받으려면 변수명 앞에 :를 붙인다.

const router = new VueRouter({
  routes:[
    {
      path:'/board/:no'
    }
  ]
});

라우터 링크

1은 no이름으로 params, aaa는 id이름으로 query에 담아서 보낸다.

<router-link to="/board/1?id=aaa">1번게시글</router-link>

패턴	일치하는 path	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

params, query

예시) 위의 값은 호출된 라우터에서 이렇게 사용한다.

console.log(this.$route.params.no);
console.log(this.$route.query.aaa);

 

4. 연결 - 프로그래밍 방식 네비게이션

push

선언적 방식	프로그래밍 방식
<router-link :to="...">	router.push(...)

HTML

<!-- mode:'hash'일때 -->
<a href="#라우터이름" @click="$router.push('/')">HOME</a>
<a href="#라우터이름" @click="$router.push({name:라우터이름})">HOME</a>

JavaScript

// 리터럴 string
router.push('home')

// object
router.push({ path: 'home' })

// 이름을 가지는 라우트
router.push({ name: 'user', params: { userId: 123 }})

// 쿼리와 함께 사용, 결과는 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

replace

router.push와 같은 역할을 하지만 새로운 히스토리 항목에 추가하지 않고 탐색하는 게 다르다.

현재 항목을 대체한다.

선언적 방식	프로그래밍 방식
<router-link :to="..." replace>	router.replace(...)

go

히스토리 스택에서 앞으로 또는 뒤로 이동하는 단계를 나타내는 하나의 정수를 매개 변수로 사용한다.

// 한 단계 앞으로 간다. history.forward()와 같다.
router.go(1)

// 한 단계 뒤로 간다. history.back()과 같다.
router.go(-1)

// 3단계 앞으로 간다.
router.go(3)

// 지정한 만큼의 기록이 없으면 자동으로 실패한다.
router.go(-100)
router.go(100)

 

5. 리다이렉트

주소로 리디렉션을 지정할 수도 있고 이름이 지정된 라우트를 지정할 수도 있다.

동적 리디렉션을 위한 함수를 사용할 수 있다.

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' },
    { path: '/c', redirect: { name: 'foo' }},
    { path: '/d', redirect: to => {
      // 함수는 인수로 대상 라우트를 받는다.
      // 여기서 path/location 반환한다.
    }}
  ]
})

 

6. 중첩 라우트

실제의 앱 UI는 일반적으로 여러 단계로 중첩된 컴포넌트로 이뤄져 있다. URL의 세그먼트가 중첩된 컴포넌트의 특정 구조와 일치한다는 것을 활용한다.

컴포넌트

Board 컴포넌트의 router-view부분에 list나 detail 컴포넌트가 중첩된다.

//Board.js ---> 루트
export default {
  template: `<div>
    자유 게시판
    <router-view></router-view>
  </div>`,
};

//BoardList.js --> 중첩
export default {
  template: `<div>
    <ul>
      <li v-for="i in 5">
        <router-link :to="'/board/detail/' + i">{{i}}번 게시글</router-link>
      </li>
    </ul>
    <router-link to="/board/write">등록</router-link>
  </div>`,
};

app.js

children으로 라우트를 중첩시킨다.

/로 시작하는 중첩된 라우트는 루트경로로 취급된다. 이렇게 하면 중첩된 url을 사용하지 않고 컴포넌트 중첩을 사용할 수 있다.

redirect를 활용해서 루트 경로로 접근했을 때 중첩된 라우트 중 하나를 매칭할 수도 있다.

이 코드에서는 /board를 방문했을 때 /board/list로 리다이렉트시켰다.

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/board',
      name: 'board',
      component: Board,
      redirect: '/board/list',//리다이렉트
      children: [
        {
          path: 'list',//실제 : /board/list
          name: 'boardlist',
          component: BoardList,
        },
        {
          path: 'detail/:no', //실제 : /board/detail/:no
          name: 'boardview',
          component: BoardView,
        }
      ],
    }
}

 

출처 : https://v3.router.vuejs.org/kr/installation.html