1. 라우팅 기초 설정

npm 패키지 설치: npm install --save vue-router

로더 구성 예시:

import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/greeting', component: Greeting }
  ]
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

App.vue 구성 요소:

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

2. 라우팅 전환 방법

템플릿 내 사용 예시:

<router-link to="/greeting">환영합니다</router-link>

다중 라우트 구성:

routes: [
  { path: '/greeting', component: Greeting },
  { path: '/salutation', component: Salutation }
]

네비게이션 컴포넌트:

<ul>
  <li><router-link to="/greeting">환영합니다</router-link></li>
  <li><router-link to="/salutation">인사말</router-link></li>
</ul>

3. 모듈화 구조

로터 파일 구조:

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

import Greeting from '../components/greeting'
import Salutation from '../components/salutation'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    { path: '/greeting', component: Greeting },
    { path: '/salutation', component: Salutation }
  ]
})

메인 파일 수정:

import router from './router'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

4. 중첩 라우팅

중첩 경로 설정:

{
  path: '/greeting',
  component: Greeting,
  children: [
    { path: 'sub1', component: Sub1 },
    { path: 'sub2', component: Sub2 }
  ]
}

템플릿 연결:

<ul>
  <li><router-link to="/greeting/sub1">서브1</router-link></li>
  <li><router-link to="/greeting/sub2">서브2</router-link></li>
</ul>
<router-view />

5. 파라미터 전달

경로 정의:

{ path: '/info/:id/:count', component: Info, name: 'info' }

전환 코드:

<router-link :to="{ name: 'info', params: { id: '100', count: '10' } }>정보</router-link>

값 조회:

{{ $route.params.id }} - {{ $route.params.count }}

6. 라우트 하이라이트

스타일 적용:

.active {
  color: red !important;
}

설정 추가:

linkActiveClass: 'active',
mode: 'history',

7. Element UI 통합

설치 명령:

npm install element-ui --save
npm install babel-plugin-component --save-dev

Babel 설정:

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

컴포넌트 사용:

<el-button type="primary">주요 버튼</el-button>
<el-select v-model="value">...</el-select>

8. Swiper 컴포넌트

설치 명령:

npm install vue-awesome-swiper --save

사용 예시:

<swiper :options="swiperOption">
  <swiper-slide v-for="(slide, index) in slides" :key="index">
    <p>{{ slide.title }}</p>
  </swiper-slide>
</swiper>

옵션 설정:

data() {
  return {
    swiperOption: {
      pagination: { el: '.swiper-pagination' },
      navigation: { nextEl: '.swiper-button-next' }
    },
    slides: []
  }
}