JSFiddle - React, Tailwind, and code Playground

by Alexander Zhukov

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <ul class="nav">
    <li class="nav_link" ><router-link to="/" exact>Home</router-link></li>
    <li class="nav_link" ><router-link to="/about-us">About us</router-link></li>
    <li class="nav_link parent_link">
      <router-link to="/user/foo">User</router-link>
      <ul class="sub_link">
         <router-link class="sub_link__item" to="/user/foo/profile">Profile</router-link>
         <router-link class="sub_link__item" to="/user/foo/posts">Posts</router-link>
      </ul>
    </li>
    </ul>
  <router-view></router-view>
</div>

SASS

.nav
  display: flex

.nav_link
  margin-right:  10px
  list-style-type: none

.parent_link
  position: relative
  
.sub_link
  position: absolute
  padding: 0
  margin-top: 10px
  
.sub_link__item
  display: block

Babel + JSX

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}
const Homes = {
  template: `
    <div class="user">
      <h2>Главная</h2>
      <router-view></router-view>
    </div>
  `
}

const AboutUs = {
 template: `
    <div class="user">
      <h2>О нас</h2>
      <router-view></router-view>
    </div>
  `
}

const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

const router = new VueRouter({
  routes: [
  	{path: '/', component: Homes, },
    {path: '/about-Us', component: AboutUs, },
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },
				
        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

const app = new Vue({ router }).$mount('#app')