[Vue3] Vue(6) Router

❗❗  데브코스 46일차 (10.04)

6일차에는 Vue에서 Router를 활용하여 페이지 이동을

다루는 방법을 다룬다. 간략하게 Vue Router에 대해 기본적인 개념만 다룰 예정이다.

 

✅ Installation

npm install vue-router@4

yarn add vue-router@4

Vue3 버전에 맞게 사용할려면 router4버전을 설치해주면 된다. (포스팅 당시 기준)

 

✅ Router 사용법

- Router 구성 방법

import { createRouter, createWebHistory } from 'vue-router'
import "필요한 컴포넌트 경로"

export default createRouter({
  history: createWebHistory(),
  routes: [
    //루트 경로
    {
      path: '/',
      component: Home,
    },
    //특정 경로 설정
    {
      path: '/documents',
      component: Docs,
    },
    // documents에 param 값이 있는 경우
    {
      path: '/documents/:id',
      name: 'docsId',
      component: DocsId,
    },
    //notFound 설정
    {
      path: '/:notFount(.*)',
      component: NotFound,
    },
  ],
})

+ main에서 플러그인으로 등록해줘야 한다.
app.use(router컴포넌트)

path : 경로를 설정해 주고 해당 경로일 때, component를 할당해 주어 보여줄 컴포넌트를 지정해 준다.

위에 지정한 경로에 맞는 컴포넌트를 어디에서 출력할 것인지 나타낼 것인지 정의하기 위해서
App.vue에서 <Router-view/>로 나타낼 위치에 지정해 주면 된다.

- Router Navbar 예시

  <Router-link to="/">Home</Router-link>
  <Router-link to="/documents">Docs</Router-link>  
  
  
  //위에서 documents param이 있는 경우에 해당하는 라우팅 설정의 name을 넣어준다.
  <Router-link
    :to="{
      name: 'docsId',
      params: { id: '7777' },
      query: { name: 'minsu', age: 85 },
    }"
  >
    Docs
  </Router-link>

<router-link to =""> 링크 이동을 위한 태그 html a태그와 유사하다

 

- 부가적인 정보

$route 객체 => 현재 페이지에 대한 정보를 가지고 있다.
fullPath => url 전체 경로
path => id값을 포함한 경로
name => 지정한 name
params => 지정한 params
query => 지정한 query

$router 객체 => 페이지에 대한 조작을 할 수 있는 여러가지 메소드가 있다.
<button @click="$router.push('/')">Home</button>

✅ Navigation Guard

각각의 페이지에 접속하기 직전에 동작하는 메소드이다.
페이지에 접근하기 전에 콜백 안에 있는 내용이 실행된다.
대표적으로 로그인을 한 이후나 접근 권한이 있을 때마 실행되어야 하는 페이지들을 관리하기 위해 사용된다.

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

 

이 외에 다양한 옵션들이 있다.

 

📖 학습한 내용

• Vue(6)
  
  • Vue Router
  • Vue Navigation Guard, 메타필드
  • Babel 구성
  • PostCSS, Autoprefixer 구성
  • Webpack Template 정리