JSFiddle - React, Tailwind, and code Playground

by choasia

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<div id="app">

</div>

JavaScript

Vue.use(VueRouter)

const Home = { template: '<div>This is Home from {{ $route.query.ref }}</div>' }
const Foo = { template: '<div>This is Foo</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }

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

new Vue({
  router,
  template: `
    <div id="app">
      <p>Current route name: {{ $route.name }}</p>
      <ul>
        <li><router-link :to="{ path: '/', query: { ref: 'producthunt' } }" exact>home</router-link></li>
        <li><router-link :to="{ path: '/foo' }">foo</router-link></li>
        <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')