JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>
  
  <router-link to="/">/home</router-link> | 
  <router-link to="/otra">/otra</router-link> | 
  <router-link to="/mais-otra">/mais-otra</router-link> | 
</div>

JavaScript

const Foo = {
	template: `<div class="foo">Foo</div>`
}

const Bar = {
	template: `<div class="bar">Bar</div>`
}

const Baz = {
	template: `<div class="baz">Baz</div>`
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/otra',
      components: {
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/mais-otra',
      components: {
        default: Foo
      }
    }
  ]
})

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