라우트사이 전환추가

라우트사이 전환추가

by SUNG BIN CHO

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Ghost's Restaurant</h1>
  <ul>
    <li>
      <router-link to="/">Home</router-link>
    </li>
    <li>
      <router-link to="/menu">Menu</router-link>
    </li>
  </ul>
  <transition>
    <router-view></router-view>
  </transition>
</div>

CSS

.v-enter-active,
.v-leave-active {
  transition: opacity .5s;
}

.v-enter,
.v-leave-active {
  opacity: 0
}

JavaScript

/* const Home = {
  template: '<div>Welcome to Ghost\'s</div>'
}
const Menu = {
  template: '<div>Today: invisible cookies</div>'
} */

const Home = {
  template: `
<transition name="spooky">
<div>Welcome to Ghost's</div>
</transition>
`
}
const Menu = {
  template: `
<transition name="delicious">
<div>Today: insisible cookies!</div>
</transition>
`
}

Vue.use(VueRouter)
const router = new VueRouter({
  routes: [{
      path: '/',
      component: Home
    },
    {
      path: '/menu',
      component: Menu
    }
  ]
})

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