JSFiddle - React, Tailwind, and code Playground

by eyedean

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">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/foo/profile">/user/foo/profile</router-link>    <router-link to="/user/foo/profile/aaa">/user/foo/profile/aaa</router-link>
    <router-link to="/user/foo/posts">/user/foo/posts</router-link>
  </p>
  <router-view></router-view>
</div>

Babel + JSX

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const UserHome = { template: '<div>Home</div>' }
const Head = { template: '<div>Head<router-view></router-view></div>' }
const UserProfile = { template: '<div>Profile5<router-view></router-view></div>', beforeRouteEnter: () => { console.log("enteringggg");  } };
const UserProfileInner = { template: '<div>Profile Inner</div>' }
const UserPosts = { template: '<div>Posts</div>' }

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
      	{ path: '', component: Head, 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: '/user/:id/profile', component: UserProfile, children: [
        	{ path: 'aaa', component: UserProfileInner }
        ]},

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

router.beforeEach((to, from, next) => {
	console.log(to.matched); next();
 });

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