JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>

<div id="app">
  <router-link :to="{ name: 'home' }">Home</router-link> |
  <router-link :to="{ name: 'bullshit', params: { xxx: 1 } }">bullshit1</router-link> |
  <router-link :to="{ path: '/bullshit-page', query: { xxx: 2 } }">bullshit2</router-link> |
  <router-link :to="{ path: '/bullshit-page?xxx=666' }">bullshit666</router-link> |
  <router-view></router-view>
</div>

JavaScript

const Home = { template: `<div>Home</div>` };

const Bullshit = {
  props: ['xxx'],
  template: `<div>Bullshit {{ xxx }}</div>`,
};


const routes = [
  { name: 'home', path: '/', component: Home },
  {
    path: '/bullshit-page',
    name: 'bullshit',
    component: Bullshit,
    props: r => ({ ...r.query, ...r.params }),
  },
];


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