vue-router-test

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.0.0-rc.3/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <ul>
    <li>
      <router-link to="/foo">foo</router-link>
    </li>
    <li>
      <router-link to="/bar">bar</router-link>
    </li>
  </ul>
  <router-view></router-view>
</div>

<script>
  //定義foo路徑元件
  var Foo = Vue.extend({
      template: '<p>This is foo!</p>'
  })

  //定義bar路徑元件
  var Bar = Vue.extend({
      template: '<p>This is bar!</p>'
  })

  var router = new VueRouter({
      mode: 'history',
      routes: [
          { path: '/foo' ,component:Foo},
          { path: '/bar' ,component:Bar}
      ]
  });
  
  new Vue({
    router,
    el:'#app',
  }).$mount('#app');
</script>