vue-router란 페이징 처리 기능이라고 생각하면 될 것 같다.
url에 따라 화면을 전환하는 방법이다.

1. router의 기본

먼저 vue 프로젝트를 새로 생성하는걸 추천한다.

vue add router

해당 내용을 터미널에 입력한다.

Y를 입력한다. use history mode를 Y로 입력하게 되면 url에 #이 붙는게 사라지게 된다.

설치가 완료된 후
/src/router/index.js 가 생기게 되는데 해당 파일을 살펴보자.

그러면 router 예제가 보이는데, 하나씩 살펴보도록 하자.
먼저 path는 url의 경로이다.
name은 router의 고유 네임이다.
component는 해당 url로 갔을때 보이는 component이다.

위의 내용이 첫 페이지인데 url에 path가 없으므로 HomeView의 모습이다.

다음은 /about이 생겼으므로 AboutView에 해당하는 모습이다.
서로 컴포넌트를 가져오는 방식이 다른데 이런 방식이 있다는 것을 보여주는 형태이므로 편한식으로 사용하면 된다.

그렇다면, 페이지로의 이동은 어떻게 하는걸까? url을 직접 입력해서 가는 방식도 있지만, 이동하게 해주는 tag가 있다. /src/App.vue를 확인해보자.

해당 태그들을 주목하자.
먼저 router-link 태그의 to에 경로를 적는다.

해당 네모칸이 태그에 해당하는 부분이다. 저 태그를 클릭하면 url이 변경되면서 원하는곳으로 이동하게 된다.

다음 router-view 에 위치한 부분에 /src/router/index.js에 정의한 컴포넌트가 위치하게 되는것이다.

다음은 HomeView에 있는 내용을 지우고 새롭게 코딩한 내용이다.
살펴보게 되면 goToAbout이라는 메소드를 선언했는데

this.$router.push("/about");

이러한 형태로도 페이지를 이동할 수 있다.

이렇게 기본적인 페이지 이동을 살펴보았다.

2. 동적 라우팅 처리

다음은 동적인 라우팅 이동처리이다. 예를 들어서 게시판을 다루는 page가 있다고 가정할때 parameter로 전송하는 방식도 있겠지만, url자체에 게시판 번호를 포함하는 경우도 있다.
ex) /board/1, /board/2
즉 /board/{page-number}
이런식으로 처리하는 방식인데 해당 내용을 처리하는 방법을 알아보자.

먼저 App.vue를 수정하자.

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

보시다 싶이 App.vue는 변경되는 컴포넌트만 표시하게 된다.
다음은 /src/views 경로에

BoardView.vue, DetailView.vue를 생성한다.
BoardView.vue에는 게시판 목록, DetailView.vue에는 해당 내용을 표시할 화면이다.

그리고 /src/router/index.js 를 수정한다.

import Vue from "vue";
import VueRouter from "vue-router";
import BoardView from "../views/BoardView.vue";
import DetailView from "../views/DetailView.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "board",
    component: BoardView,
  },
  {
    path: "/detail/:id",
    name: "detail",
    component: DetailView,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

여기서 주목할 점이 :id 부분이다. 이부분이 동적으로 들어올 값이 되며, id라는것이 해당 값을 받는 변수이름이다.

다음은 /src/views/BoardView.vue의 내용이다.

다음은 /src/views/DetailView.vue의 내용이다.

해당 값을 $route.params.id 로 가져올 수 있다.

화면에서 확인해보자.

url은 서로다르지만 해당 내용을 처리 할 수 있다.

3. paramter 전송

다음 내용은 paramter를 전송하는 방법이다.
정확히는 query string이다. url로 파라미터를 넘기는 방식이다.

BoardView.vue의 내용에 메시지를 추가하였다. 그리고 this.$router.push 의 내용도 변경되었다. 옵션이 추가되었는데 path는 옮겨질 url query는 보낼 파라미터들을 뜻한다.

위의 내용처럼 url에 파라미터가 포함되게 되었으며 $route.query.message 로 출력해보았다.

4. 네비게이션 가드

해당 함수들은 router 전역으로 적용이 되며, beforeEach는 router가 이동전에 afterEach는 router이후에 동작한다.

먼저 beforeEach를 살펴보자.
beforeEach에는 to, from, next 파라미터가 있는데, to는 이동하게 될 router의 정보, from은 이동하기전 router의 정보이다.
next는 함수이며, next를 호출해야지만 다음 페이지로 넘어갈수가 있다.

afterEach도 마찬가지지만 router 이후에 동작하기 때문에 next함수가 없다.

로그를 보듯이 저런 형태로 나오게 된다.

네비게이션 가드는 사실 이 정도외엔 자주 쓸 내용이 없다고 생각되지만 좀 더 자세히 알고 싶다면 네비게이션 가드 자세히...를 참고하면 될 것 같다.