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>
<div id="appHead">
</div>

<div id="app">
  <h1>Body</h1>
    <p>
    <!-- use v-link directive for navigation. -->
    <a v-link="{ path: '/foo' }">Go to Foo</a>
    <a v-link="{ path: '/bar/23' }">Go to Bar</a>
  </p>

  <!-- use router-view element as route outlet -->
  <router-view>
  </router-view>
  end
</div>

CSS

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

JavaScript

var vmHead = new Vue({
	el: '#appHead',
  data: {
  	}
})

// Define some components
var Foo = Vue.extend({
  template: '<p>This is foo!</p>',
  data: function() { return {
  }}
});

var Bar = Vue.extend({
  template: '<p>This is bar! {{$route.params.id}}</p>',
  data: function() { return {
  }},
   created: function() {
     alert( this.$route.params.id)
  }
 });

// The router needs a root component to render.
// For demo purposes, we will just use an empty one
// because we are using the HTML as the app template.
var App = Vue.extend({
})

// Create a router instance.
// You can pass in additional options here, but let's
// keep it simple for now.
var router = new VueRouter()

// Define some routes.
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
router.map({
    '/foo': {
        component: Foo
    },
    '/bar/:id': {
        component: Bar
    }
})

// Now we can start the app!
// The router will create an instance of App and mount to
// the element matching the selector #app.
router.start(App, '#app')