Vue router

Vue router

by Saurabh Mimani

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">
  <input v-model="pState.header">
  <input v-model="hubState.message">
  <pre>{{pState.header}}</pre>
  <pre>{{$data | json}}</pre>
</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' }">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 hub = {
  state: {
    message: 'Hello!'
  }
};

var vmHead = new Vue({
	el: '#appHead',
  data: {
  	  pState: {
    		header: "Header....." 
    	},
    	hubState: hub.state
  	}
})

// Define some components
var Foo = Vue.extend({
  template: '<input type="number" v-on:input="addToCart($event, num)" min="0" placeholder="0">',
  data: function() { return {
  	pState: {
    	dB: "hello B"
    },
    hubState: hub.state,
    num: 1
  }},
  
  methods: {
  	addToCart: function(event, id) { alert(event.target.value); }
  }
});

var Bar = Vue.extend({
  template: '<p>This is bar!</p>',
  data: function() { return {
  	pState: {
    	dB: "hello B"
    },
    hubState: hub.state,
  }}
});

// 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': {
        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')