Vue.js
Source
Edit
History

Vue Router 사용

카탈로그
  1. 1. Vue Router
    1. 1.1. Install
      1. 1.1.1. CDN
      2. 1.1.2. NPM
    2. 1.2. Use
      1. 1.2.1. Html
      2. 1.2.2. Typescript

Vue Router

Install

CDN 또는 npm install을 통해 설치

CDN

1
2
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

NPM

1
npm install vue-router
1
2
3
// main.ts

import router from './router';
1
2
3
4
5
6
// router/index.ts

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

Vue.use(VueRouter)

Use

Html

1
2
3
4
5
6
7
<p>
    <!-- `<router-link>`는 `<a>` 태그로 렌더링-->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 렌더링 되는 장소 -->
<router-view></router-view>

Typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// File: router/index.ts

// 1. 모듈과 Home 템플릿 불러오기
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue';

Vue.use(VueRouter)

// 2. 라우트 정의
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
];

// 3. VueRouter 만들기
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});
1
2
3
4
5
// File: main.ts
// 4. mount 하기 (router 옵션을 전체 앱에 주입)
const app = new Vue({
    router
}).$mount(`#app`)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- File: Home.vue -->
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';

export default {
  name: 'home',
  components: {
    HelloWorld,
  },
};
</script>

<router-link>는 현재 라우트와 일치할 때 자동으로 .router-link-active 클래스가 추가