[Vue.js] Router(라우터) 기능에 대해서 알아보자.

 

Vue.js 라우터란??

-vue.js 공식 라우터.

-페이지간 전환을 스무스하고 쉽게 구현해주는 라이브러리.

-페이지 이동 시 URL이 변경되면, 변경된 요소의 영역에 컨포넌트를 갱신함.

-SPA(Single Page Application)의 특징으로 DOM을 새로 갱신하는 것이 아님.

 

 

폴더 구조

├── router
│   └── index.js
├── App.vue
└── main.js

 

 

 

주요 기능

1. 라우트 정의와 컴포넌트 매핑

   : routes 배열을 정의하여 각 URL에 맞는 컴포넌트를 매핑함.

   : path 속성으로 경로를, component 속성으로 매핑할 컴포넌트를 지정함. (이 두 속성 필수로 작성해애함.)

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

Vue.use(VueRouter)

import Home from '@/views/Home'
import About from '@/views/About'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
]

const router = new VueRouter({
  routes
})

 

각 경로 별로 매핑할 컴포넌트를 정의하고 이렇게 정의한 라우터를 <router-link>를 사용해서 다른 페이지로 이동할 수 있음.

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

 

또한, <router-view>를 사용해서 현재 라우트에 맞는 컴포넌트를 렌더링할 수 있음.

<router-view></router-view>

 

 

 

2. Nested route(중첩된 라우트)

   : 라우터 컴포넌트 안에 하위 라우터 컴포넌트를 중첩하여 구성하는 방식.   

   : children 속성을 활용해서 하위 라우트를 정의할 수 있음.

   : Parent - Child 형태.

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About,
    children: [
      {
        path: 'history',
        component: History
      },
      {
        path: 'team',
        component: Team
      }
    ]
  },
]

위 코드에서 /about 경로의 하위 경로로/about/history 경로와 /about/team 경로가 정의되어 있음.

 

하위 경로로 정의된 라우트는 '/' 를 따로 사용하지 않음.

 

 

 

3. Named route(명명된 라우트)

   : 특정 URL 주소에 여러개의 컴포넌트를 영역별로 지정하여 렌더링 하는 것 .

   : path 속성 대신 name 속성을 사용해서 라우트에 이름을 지정할 수 있음.

   : 여러 개의 컴포넌트를 동시에 표시하는 방식. (같은 레벨)

// App.vue


<div id="app">
  <router-view name="appHeader"></router-view>
  <router-view></router-view>
  <router-view name="appFooter"></router-view>
</div>

 

// router.js
 
 import AppHeader from "@/templates/AppHeader"
 import AppFooter from "@/templates/AppFooter"

// 방법 1
{
  path: '/home',
  components: {
    appHeader: AppHeader,
    default: Body,
    appFooter: AppFooter
  },
  
  
// 방법 2  
{
  path: '/home',
  name: 'AppHeader'
  component: AppHeader
},

 

Nested Router vs Named Router
 - Nested Router : 특정 URL에 지정된 1개의 컴포넌트가 여러 개의 하위 컴포넌트를 갖는 것.
 - Named Router : 특정 URL에 여러 개의 컴포넌트를 영역 별로 지정하며 렌더링 하는 것.

 

 

 

4. Dynamic route(동적 라우트)

   : :을 사용해서 경로에 변수를 포함시킬 수 있음.

   : 라우터로 데이터를 넘겨줘서 컴포넌트에서 해당 데이터를 사용할 수 있음.

   : params(Dynamic Router) 방식과 query(Query String) 방식이 있음.

   : 넘겨 받은 데이터를 변수로 지정하면 재사용성을 높힐 수 있음.

 

데이터 보내기 

//app.vue

//params 방식
<router-link :to="{name: detail, params: { animal: 'cat' , age: 5 }}">
	전송하기
</router-link>


//query 방식
<router-link :to="{name: detail, query: { animal: 'cat' , age: 5 }}">
	전송하기
</router-link>

 

라우트 정의

//router.js

import Detail from '@/views/Detail'

const routes = [
  //params 방식
  {
    path: '/detail/:animal/:age',
    name: 'detail',
    component: Detail,
    props:true,
    //props를 true로 설정하면 데이터를 props로도 받을 수 있음
  },
  
  
  //query 방식
  {
    path: '/detail',
    name: 'detail',
    component: Detail,
  },
]

 

데이터 받기

//detail.vue


//params 방식
<p>{{ $route.params.animal }}</p>
<p>{{ $route.params.age }}</p>


//query 방식
<p>{{ $route.query.animal }}</p>
<p>{{ $route.query.age }}</p>

 

 

Dynamic Router vs Query String
두 가지 방식 모두 URL을 사용해서 데이터를 넘겨주는 방식은 똑같지만 Query String의 경우 URL이 지저분해보인다는 단점이 있음.
시작 - ?
다음 질의 - &
데이터 - 변수 = 값

Query String은 위 규칙으로 URL에 작성됨.

 

 

***URL 의존성 문제

동적 라우트와 쿼리스트링 모두 데이터를 URL로 전달해주기 때문에 데이터를 해당 방식으로 받아서 사용하는 컴포넌트는 URL에 의존적일 수 밖에 없으며 해당 방식으로 모든 데이터를 처리하면 재사용성이 떨어진다는 단점이 있음. 따라서 넘겨받은 데이터를 변수 처리하면 재사용성을 높힐 수 있음. (props 옵션)

 

props 변수 처리

//detail.vue


//params 방식
<template>
    <p>{{ animal }}</p>
    <p>{{ age }}</p>
<template>

<script>
import { useRoute} from 'vue-router'

    export default {
        name: 'Detail',
        
        setup(){
        	const route = useRoute();
            
            //넘겨받은 데이터를 변수 처리
            const animal = route.params.animal
            const age = router.params.age
            
            return{
		animal,
                age,
            }
        }
</script>

 

 

 

5.redirect 속성

   : 라우트를 다른 경로로 리다이렉트할 수 있음.

// '/a'에서 '/b'로 리디렉션
routes: [{path : '/a', redirect: '/b'}]

// 이름이 있는 라우터의 경우
routes: [{path : '/a', redirect: {name: 'babo'}}]

// 함수를 사용하여 동적 리디렉션 가능 
routes: [{path : '/a', redirect: to => {return '/with-params:id'}}]

 

 

 

6. alias 속성 

   : 라우트에 대한 별칭을 지정함.

   : 다른 경로에서도 같은 컴포넌트를 사용할 수 있음.

const routes = [{ 
    	path: '/a', component: A, alias: '/b' 
    },
]

// '/b'를 방문해도 url을 '/a'에 방문한 것처럼 표시

 

 

 

7. meta 속성

   : 라우트에 대한 메타 데이터를 지정함.

   : 라우트에 대한 추가적인 정보 제공, 라우트를 보호하기 위한 인증 정보를 전달하는 용도.

   : 인증 정보 확인을 위해서 requiresAuth 속성을 사용함.

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Login from '@/views/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
})

위 코드에서는 /about 경로에 대한 meta 속성을 지정하여 해당 페이지에 대한 인증 여부를 확인할 수 있음. 이를 위해 requiresAuth라는 속성을 사용하고 있음. 이제 /about 경로에 접근하려면 로그인이 필요하도록 구현할 수 있음.

 

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !auth.isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})

위 코드에서는 beforeEach 메소드를 사용하여 라우트 이동 전에 인증 여부를 확인하고, 인증되지 않은 경우 /login 경로로 리다이렉트하도록 함. 이제 /about 경로에 접근하려는 경우, 로그인 페이지로 이동하게 됨.

 

 

 

8. caseSensitive 속성

   : 라우트 경로를 대소문자 구분으로 처리할지 여부를 지정함.

   : 속성을 사용하지 않는다면 기본값은 false 처리.

   : true로 설정하면 대소문자를 구분함.

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: About,
      caseSensitive: true // 대소문자 구분
    }
  ]
})

 

 

 

9. 네비게이션 가드 

  : 라우트 진입 시에 특정 조건이 만족되지 않으면 라우팅을 막는 기능.

  : 사용자가 접근할 수 없는 페이지의 보안을 강화하거나, 로그인한 사용자만 접근 가능한 페이지 구현이 가능함.

  : 전역 가드와 라우트별 가드로 나뉨 

  : 컴포넌트 내에서도 네비게이션 가드를 구현할 수 있음 

 

전역가드

전역가드는 router.beforeEach() 메소드를 사용함. 이 메소드는 라우팅 시작 전에 실행되며 to, from, next 세 가지의 매개변수를 받음

• to : 이동할 라우트 객체(목적지)
• from : 현재 라우트 객체(출발지)
• next : 목적지 라우트로 이동하기 위해 호출 해야하는 함수. next()를 호출하면 라우트 이동, next(false)를 호출하면 이동이 막힘

const router = new VueRouter({
  routes: [...],
});


router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 로그인 여부를 확인하는 함수
  if (to.meta.requiresAuth && !isAuthenticated) {
    // requiresAuth 메타 필드가 true이고, 로그인하지 않은 경우 로그인 페이지로 이동합니다.
    next('/login');
  } else {
    next();
  }
});

위 코드에서 to.meta.requiresAuth는 라우트 객체의 메타 필드 중 하나로, 해당 라우트가 인증이 필요한 페이지인지 여부를 나타냄. checkAuth() 함수는 로그인 여부를 확인하는 함수로, 로그인한 경우 true를 반환, 로그인하지 않은 경우 false를 반환.

 

 

라우트별 가드

라우트별 가드는 beforeEnter 속성을 사용함. 이 속성은 각 라우트에 정의할 수 있으며 to, from, next 세 가지의 매개변수를 받음. 사용법은 전역가드와 같음.

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
      beforeEnter: (to, from, next) => {
        if (isLoggedIn()) {
          next('/dashboard')
        } else {
          next()
        }
      }
    }
  ]
})

위 코드에서 /login 경로로 이동하기 전에 beforeEnter 속성을 활용해서 로그인 여부를 확인함. 만약 로그인이 되어있는 상태라면 /dashboard 경로로 이동하고, 로그인이 되어있지 않다면 /login 경로로 이동함.

 

 

컴포넌트 내 

컴포넌트 내에서도 네비게이션 가드를 구현할 수 있음. 이 경우  beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave 속성을 사용하여 구현함. 마찬가지로 to, from, next 세 가지 매개변수를 받음.

export default {
  beforeRouteEnter(to, from, next) {
    const isAuthenticated = checkAuth(); // 로그인 여부를 확인하는 함수
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath },
      });
    } else {
      next();
    }
  },
  
  beforeRouteUpdate(to, from, next) {
    // 라우트 업데이트 시에도 인증 여부를 체크합니다.
    const isAuthenticated = checkAuth();
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath },
      });
    } else {
      next();
    }
  },
  
  beforeRouteLeave(to, from, next) {
    // 라우트를 떠날 때는 별도의 체크 없이 바로 이동합니다.
    next();
  },
};

 

***네이게이션 가드는 일종의 라이프사이클 훅과 같습니다. 

 

 

 

10. 해시모드

   : 해시모드란 URL에 해시(#)를 사용해서 브라우저의 주소창에 표시되는 URL을 변경하는 방식.

   : 해시모드를 사용하면 페이지를 새로고침하지 않아도 URL을 변경하는 것이 가능함.

http://example.com/#/about

위 URL에서 해시(#) 이후의 부분은 Vue 라우터가 관리함. 즉, 서버에 해시 이후의 부분이 전달되지 않아서 URL 변경없이 페이지 전환이 가능함. 따라서 해시모드는 Vue 라우터의 SPA(Single Page Application)에서 많이 사용함. 

 

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = new VueRouter({
  mode: 'hash', // 해시모드 설정
  routes
})

 

Vue.js 라우터 기능에 대해서 알아보자 끝.