JSFiddle - React, Tailwind, and code Playground

by Sabazou

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <router-view></router-view>
</div>

CSS

.Random {
  margin: 50px auto;
}

.outlet {
  background: #efefef;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}

label {
  display: block;
  font-size: 11px;
  margin-top: 20px;
}

JavaScript

const Random = {
  template: `
    <div class="Random">
      <p>Hello from parent! Heres my initial data: {{ initialData }}</p>
      <router-link to="/random/foo">Go to child</router-link>

      <label>router-view: </label>
      <div class="outlet">
        <router-view />
      </div>
    </div>
  `,
  data() {
    return {
      initialData: Math.random()
    }
  }
}

const RandomSlug = {
  template: `
  	<p>    <strong>Hello from child. Did the parent get re-mounted?</strong>
    <router-link to="/random">Go back</router-link></p>
  `
}

const router = new VueRouter({
  routes: [{
    path: '/random',
    component: Random,
    children: [{
      path: '*',
      component: RandomSlug
    }]
  }]
})

window.location.href = '#random'
const app = new Vue({
  router
}).$mount('#app')