JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="app">
  <router-link to="/">home</router-link>

  <ul>
    <router-link v-for="n in links" :to="n.to" v-slot="s">
      <li :class="{ active: s.isExactActive }">
        <a :href="s.href" @click="s.navigate">{{ n.title }}</a>
      </li>
    </router-link>
  </ul>

  <router-view></router-view>
</div>

CSS

.active {
  background: red;
}

JavaScript

const router = new VueRouter({
  routes: [
    { path: '/', component: { template: '<h2>home</h2>' }, },
    { path: '/xxx', component: { template: '<h3>hello, world!!</h3>' } },
    { path: '/yyy', component: { template: '<h3>fuck the world</h3>' } },
    { path: '/zzz', component: { template: '<h3>fuck everything</h3>' } },
  ],
});

new Vue({
  router,
  el: '#app',
  data: () => ({
    links: [
      { to: '/xxx', title: 'XXX' },
      { to: '/yyy', title: 'YYY' },
      { to: '/zzz', title: 'ZZZ' },
    ],
  }),
});