JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.js"></script>
<div id="app" class="page">
  <div class="navigation">
    <router-link to="/foo">Go to foo</router-link>
    <router-link to="/bar">Go to bar</router-link>
    <router-link to="/baz">Go to baz</router-link>    
  </div>

  <router-view class="content"></router-view>  
</div>

SCSS

.page {
  display:flex;
  
  .navigation {
    padding: 1rem;
    background: white;
    
    a {
      display: block;
    }
  }
  
  .content {
    padding: 1rem;
    background: #e8e8f8;
    flex: 1;
  }
}

JavaScript

const Foo = Vue.extend({
	template: '<div>Foo</div>'
});

const Bar = Vue.extend({
	template: '<div>Bar</div>'
});

const NotFound = Vue.extend({
	template: '<div>Page not found</div>'
});

const router = new VueRouter({
	routes: [
   { path: '/', redirect: '/foo' },
   { path: '/foo', component: Foo },
   { path: '/bar', component: Bar },
   { path: '/notFound', component: NotFound },
  ],
});

router.beforeEach((to, from, next) => {
  if (!to.matched.length) {
  	next('/notFound');
  } else {
  	next();
  }
})

new Vue({
	el: '#app',
  
  router,
});