JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://npmcdn.com/vue@1.0.26/dist/vue.min.js"></script>
<script type="text/javascript" src="https://npmcdn.com/vue-router@0.7.13/dist/vue-router.min.js"></script>

<div id="app">
    <h1>Hello App! {{Myvalue1}}</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>
    <!-- route outlet -->
    <router-view></router-view>
</div>

JavaScript

var Foo = {
    template: '<p>This is foo!</p>'
}

var Bar = {
    template: '<p>This is bar!</p>'
}

var App = {
  el: '#app',
  data: function() {
  		return {
    		Myvalue1: 'Roman'
		}
  	}
}

var router = new VueRouter({
  history:true
}) 
 
router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})
 
router.start(App, '#app')