JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/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">
  <div v-for="{ name, values } in routes">
    <router-link v-for="v in values" :key="v" :to="`/${name}/${v}`">{{ v }}</router-link>
  </div>

  <div class="slider">
    <transition name="slide">
      <router-view :key="$route.params.value" class="slide-item" />
    </transition>
  </div>
</div>

CSS

a {
  margin: 10px;
}

.slider {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slide-item {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  box-sizing: border-box;
}

.text-route {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-family: monospace;
}

.slide-enter {
  transform: translateY(300px);
}

.slide-enter-active {
  transition: transform .5s ease-in;
}

.slide-enter-to {
  transform: translateY(0);
}

.slide-leave {
  transform: translateY(0);
}

.slide-leave-active {
  transition: transform .5s ease-in;
}

.slide-leave-to {
  transform: translateY(-300px);
}

Babel + JSX

const ColorRoute = {
  template: `<div :style="{ background: $route.params.value }"></div>`,
};

const TextRoute = {
  template: `<div class="text-route">{{ $route.params.value }}</div>`,
};

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/color/silver' },
    { path: '/color/:value', component: ColorRoute },
    { path: '/text/:value', component: TextRoute },
  ],
});

new Vue({
  el: '#app',
  router,
  data: {
    routes: [
      {
        name: 'color',
        values: [ 'red', 'lime', 'yellow', 'blue', 'magenta', 'orange', 'aqua' ],
      },
      {
        name: 'text',
        values: [ 'hello-world!!', 'fuck-the-world', 'fuck-everything' ],
      },
    ],
  },
});