JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>
<script src='https://unpkg.com/[email protected]/dist/vue-router.js'></script>

<div id="app">
  <h3>{{title}}</h3>
  <hr />
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-link to="/foo/10">/foo-10</router-link>
  <hr />
  <router-view></router-view>
</div>

JavaScript

const Home = { template: '<div>Home</div>', data: {title: "Home"} }
const Foo = { template: '<div>Foo</div>', data: {title: "Foo"} };
const FooShow = {
  template: '<div>Foo with id {{id}}</div>',
  data() {
    return {id: this.$route.params.id }; 
  }
};

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo },
    { path:  '/foo/:id', component: FooShow }
  ]
})

new Vue({
  router,
  el: '#app',
  data: {
    title: 'Hello World'
  }
})