JSFiddle - React, Tailwind, and code Playground

by vamsi krishna

HTML

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<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">
   <div class="container">
  <br>
  	  <ul class="nav nav-pills"> 
      	<router-link to="/125" activeClass="active" tag="li"><a>user 125</a></router-link>
       	<router-link to="/155" activeClass="active" tag="li"><a>user 155</a></router-link>
     </ul>
		<router-view :key="$route.fullPath"></router-view>
	
  </div>  
</div>

JavaScript

const RouteOne = {
	template: `
		 <div class="container">
      <h1>this is user: {{userid}}</h1> 
  </div>
  `,
	data(){
			return{
				userid: null
			};
		},
		created(){
			this.userid = this.$route.params.id;
			alert(JSON.stringify(this.$route.params));
		}
}



const router = new VueRouter({
  routes: [
    {path: '/:id', component: RouteOne}
  ]
})

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