<a href="https://toster.ru/q/670540" target="_blank">Для этого Тостера</a>
<h2>Привет, App!</h2>
<div id="app">
  <p>
    <!-- используйте компонент router-link для навигации. -->
    <!-- укажите ссылку, передав реквизит "кому". -->
    <!-- `<router-link>` по умолчанию будет отображаться как тег `<a>` -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- выход маршрута -->
  <!-- компонент, соответствующий маршруту, будет отображаться здесь -->
  <router-view></router-view>
</div>

// var Vue = require('vue') 
    // это вариант автора genri. если раскомментировать - сломается.

// var VueRouter = require('vue-router').default 
    // это вариант автора genri. если раскомментировать - сломается.

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// Vue.use(VueRouter)
    // эта строка пока не мешает, если станет нужна - пожалуйста...

const router = new VueRouter({
//  mode: 'history', 
    // и без этой строки сможем обойтись, хоть и не мешает.
  
  routes: [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
  ]
})

const app = new Vue({ router, el:'#app' }) 
    // это рабочий вариант автора, где "router: router" усох до "router". 

//const app = new Vue({router}).$mount('#app') 
    // это тоже рабочий вариант, аналогичный авторскому.