Vue router

Vue router

HTML

<script src="https://cdn.jsdelivr.net/vue/1.0.13/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/0.7.7/vue-router.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>


<div id="app">
  <h1>Body</h1>
    <p>
    <a v-link="{ path: '/foo' }">Go to Foo</a>
    <a v-link="{ path: '/bar' }">Go to Bar</a>
  </p>


  <router-view>
  </router-view>

</div>

CSS

.v-link-active {
    color: red;
}

JavaScript

// Define some components
var Foo = Vue.extend({
  template: '<p id="p1">This is foo!</p>',
  ready: function () {
    $("#p1").click(function () {
      alert('p#p1 was clicked')
    })
  }
});

var Bar = Vue.extend({
  template: '<p>This is bar!</p>'
});


var App = Vue.extend({
})


var router = new VueRouter()


router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})

router.start(App, '#app')