router.vue

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

/* eslint-disable no-new */
// var app = new Vue({
// el: 'body',
// components: {App}
// })

var Foo = Vue.extend({
  template: '<p>This is foo!</p>'
})

var BarComponent = Vue.extend({
  template: '<div class="foo">' +
  '<h2>This is Foo!</h2>' +
  '<router-view></router-view>' + // <- nested outlet
  '</div>'
})

var Bar = Vue.extend({
  component: App
})

Vue.use(VueRouter)

var app = Vue.extend({
  components: {App}
})

var router = new VueRouter()

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

router.start(app, 'body')