Vue3) Vue-Router

Vue-Router란?

• Vue.js에서 페이지 이동을 위한 라이브러리 입니다
• Vue.js 공식 라우터 입니다 
• 페이지 이동시 url이 변경되면 완전 새로운 페이지를 불러오는게 아닌,
  변경된 요소 컴포넌트만 동적으로 다시 작성하는 SPA을 구현합니다

 

 

---

 

- 주요기능

• 동적 라우트 매칭 
  주어진 패턴을 가진 라우트를 동일 컴포넌트에서 매핑해야 하는 경우가 자주 있습니다. user/100과 user/101
  
  
• 중첩된 라우트/뷰 매핑
  중첩 된 라우트 구성을 사용하여 다음과 같은 관계를 표현하는 것이 간단해집니다
  
  
• 라우터 파라미터 쿼리 와일드카드
  
  
• 네비게이션 가드
  
  
• active CSS 클래스를 자동으로추가해주는 링크
  
  
• HTML5 히스토리 모드
  vue-router의 기본 설정은 hash 모드입니다. URL 해시를 사용하기 때문에 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 해시를 제거하기위해 vue-router는 히스토리 모드를 사용할수 있습니다

 

---

 

시작하기

• npm install vue-router

 

vue 2버전

router/index.js

// 모듈 시스템 (예: vue-cli)을 이용하고 있다면, Vue와 Vue 라우터를 import 합니다
// 그리고 `Vue.use(VueRouter)`를 호출합니다

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

Vue.use(VueRouter)

// 라우트 컴포넌트를 정의
const routes = [
   {
       path: '/',
       component: () => import('../views/index')
   }
]

// router 인스턴스 생성
const router = new VueRouter({
  routes
})

// 루트 인스턴스 main.js 에서 router 옵션을 주입합니다
const app = new Vue({
  router
}).$mount('#app')

 

vue 3버전

router/index.js

import {createRouter, createWebHistory} from 'vue-router'

// 라우트 컴포넌트를 정의
const routes = [
    {
        path: '/',
        name: 'index',
        component: () => import( '../components/HelloWorld.vue')
    },
    {
        path: '/main',
        name: 'main',
        component: () => import( '../components/mainPage.vue')
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

 

 

- Route 옵션

path : route를 찾을 수 있는 url path

name : route로 연결할 때 사용하는 이름(선택)

component : route에서 불러와질 컴포넌트

history mode

• HTML5 모드(권장)
  • history: createWebHistory()
  • Vue 앱은 Client Side인 SPA앱이기 때문에 url로 다이렉트로 접속하게 되면 404에러가 뜬다. 이런 문제를 해결하기 위해서는 서버측에서 대응이 필요합니다. 공식 문서에서 확인할 수 있습니다.
  • url 형태 - https://sample/home
• 해시 모드
  • history: createWebHashHistory()
  • hash 관련 내용은 서버로 보내지지 않기 때문에 서버측 대응이 필요하지 않습니다
  • SEO(검색 엔진 최적화) 에 매우 좋지 않습니다.
    url 형태 - https://sample/#home

 

 

- 중첩된 Route

 

 

위 구조와 같이 여러 단계로 중첩된 컴포넌트를 vue-router로 간단히 구현할 수 있습니다

 

//... 

const routes = [
   {
        path: '/user/:id',  				//…(1)
        component: () => import(‘@/page/user’),
        props: true,				//…(2)
        children: [        				//…(3)
        {
          // /user/:id/profile 과 일치 할 때
          // UserProfile은 User의 <router-view> 내에 렌더링 됩니다
          path: 'profile',
          name: 'profile'	// path와 함께 name을 제공 할 수 있습니다 …(4)
          component: () => import(‘@/page/profile’)
        },
        {
          // /user/:id/posts 과 일치 할 때
          // UserPosts가 User의 <router-view> 내에 렌더링 됩니다
          path: 'posts',
          component: () => import(‘@/page/posts’)
        }
      ]
   }
]

 

1. /로 시작하는 route는 루트 경로로 취급됩니다

2. props 옵션을 사용하여 유연성을 높일 수 있습니다. ($route 분리) 

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

다음과 같이 변경이 가능합니다

const User = {
  // route param과 똑같은 이름의 prop을 추가해야합니다.
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}

 

3. children 옵션은 라우트 설정 객체의 배열입니다. 필요한 만큼 중첩 된 뷰를 사용할 수 있습니다

 

4. router-link나 router.push에서 name 옵션을 사용하여 이동이 가능합니다

router.push({ name: ‘user’ , params: { username: ‘foo’} })