JSFiddle - React, Tailwind, and code Playground

by Thorsten

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="/detail/foo">foo</router-link><br>
    <router-link to="/detail/bar">bar</router-link><br>
  </p>
  <router-view :key="$route.fullPath"></router-view>
</div>

Babel + JSX

let VueComponent = Vue.extend({
  template: `
  	<div>
  		<div>Execute only once '{{name}}', Not initialized again？？？</div>
    	<div>Current route '{{$route.params.name}}'</div>
    </div>`,
  data(){
    return {
      name: this.$route.params.name
    };
  },
  /*beforeRouteUpdate(to) {
    this.name = to.params.name
  }*/
})

const router = new VueRouter({
  routes: [
    {
      path: '/detail/:name', component: VueComponent,
    }
  ]
})
const app = new Vue({ router }).$mount('#app')