Vue 2 with Vue-Router 2

vue.js 와 vue-router를 사용하는 예제입니다.

by ChangJoo Park

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
<div id="router-app">
  <navigation></navigation>
  <router-view></router-view>
</div>

<template id="navigation">
  <div id="navigation">
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
      <li>
        <router-link to="/about">About</router-link>
      </li>
    </ul>
  </div>
</template>

<template id="home-index">
  <div>
    <h1>Home</h1>
  </div>
</template>

<template id="about-index">
  <div>
    <h1>About</h1>
    <p>show details</p>
    <ul>
      <li>
        <router-link to="/about/user">User</router-link>
      </li>
      <li>
        <router-link to="/about/company">Company</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<template id="about-user">
  <div>
    <h2>About User</h2>
  </div>
</template>

<template id="about-company">
  <div>
    <h2>About Company</h2>
  </div>
</template>

SCSS

#navigation {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ul li {
    display: inline-block;
    padding: .5rem; .2rem;
    border: 1px solid black;
  }
}

JavaScript

const Navigation = Vue.component('navigation', {
  template: '#navigation'
})

// Router Components
const HomeIndex = Vue.component('home-index', {
  template: '#home-index'
})
const AboutIndex = Vue.component('about-index', {
  template: '#about-index'
})
const AboutUser = Vue.component('about-user', {
  template: '#about-user'
})
const AboutCompany = Vue.component('about-company', {
  template: '#about-company'
})

const routes = [{
  path: '/',
  component: HomeIndex
}, {
  path: '/about',
  component: AboutIndex,
  children: [{
    path: 'user',
    component: AboutUser
  }, {
    path: 'company',
    component: AboutCompany
  }, ]
}]
const router = new VueRouter({
  routes
})

const routerApp = new Vue({
  router,
  el: '#router-app'
})