라우팅기본

by SUNG BIN CHO

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Choppy’s Restaurant</h1>
  <ul>
    <router-link tag="li" to="/" exact><a>Home</a></router-link>
    <li><router-link to="/menu">Menu</router-link></li>
    <router-link tag="li" to="/bar" :event="['mousedown', 'touchstart']">
      <a>Bar</a>
    </router-link>
  </ul>
  <router-view></router-view>
</div>

CSS

a.router-link-active, li.router-link-active>a {
  background-color: gainsboro;
}

JavaScript

Vue.use(VueRouter)

const Home = { template: '<div>Welcome to Choppy’s</div>' }
const Menu = { template: '<div>Today we have cookies</div>' }
const Bar = { template: '<div>We serve cocktails</div>' }

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

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