JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
<div id="vue">
  <nav>
    <router-link v-for="route in $router.options.routes" :to="route">{{route.name}}</router-link>
  </nav>
  <pre>{{$route.query}}</pre>
  <router-view></router-view>
</div>

CSS

body{
  margin:0px;
}
nav{
  display:flex;
  background:#444;
}
nav a{
  flex-grow:1;
  color:#fff;
  padding:10px;
}
nav a:hover{
  background:#555;
}

JavaScript

let router = new VueRouter({
  routes: [{
    path: '/foo',
    name:'Foo',
    component: {
			template:`
      <div>
      	<input @input="$router.push({name:'Foo', query:{test:$event.target.value}})">
      	<h1>Foo</h1>
        <router-link to="/bar#woot">Woot</router-link>
      </div>`
    }
  },{
  	path: '/bar',
    name:'Bar',
    component: {
    	template:`
      <div>
      	<h1 style="margin-bottom:100vh">Bar</h1>
        <h2 id="woot" style="margin-bottom:100vh">Woot</h2>
      </div>`
    }
  }],
  scrollBehavior (to, from){
  	if(to.hash){
      return {selector:to.hash}
    }
  }
})

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