JSFiddle - React, Tailwind, and code Playground

by Jihad Dzikri Waspada

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.11/vue-router.min.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <a v-link="{ path: '/foo' }">Go to /foo</a>
    <a v-link="{ path: '/bar' }">Go to /bar</a>
    <a v-link="{ path: '/baz' }">Go to /baz</a>
  </p>
  <router-view></router-view>
</div>

CSS

.v-link-active-exact {
    color: red;
}

JavaScript

// define some components
var Foo = Vue.extend({
  template:
    '<div class="foo">' +
      '<h2>This is Foo!</h2>' +
      '<router-view></router-view>' + // <- nested outlet
    '</div>'
})

var Bar = Vue.extend({
    template: '<p>This is bar!</p><button @click="onClick">Go to /baz</button>',
    methods: {
    	onClick: function() {
      	//this.$router._children[0].onAlert();
        console.log(this.$router._children);
      	this.$router.go('/baz');
      }
    }
})

var Baz = Vue.extend({
    template: '<p>This is baz!</p><button @click="onClick">Go to /bar</button>',
    methods: {
    	onClick: function() {
      	console.log(this.$router._children);
      	this.$router.go('/bar');
      },
      onAlert: function() {
      	alert('haha');
      }
    }
})

// configure router
var router = new VueRouter()

router.map({
  '/foo': {
    component: Foo,
    // add a subRoutes map under /foo
    subRoutes: {
      '/': {
        // This component will be rendered into Foo's <router-view>
        // when /foo is matched. Using an inline component definition
        // here for convenience.
        component: {
          template: '<p>Default sub view for Foo</p>'
        }
      }
    }
  },
  '/bar': {
    // Bar will be rendered inside Foo's <router-view>
    // when /foo/bar is matched
    component: Bar
  },
  '/baz': {
    // same for Baz, but only when /foo/baz is matched
    component: Baz
  }
})

// start app
var App = Vue.extend({})
router.start(App, '#app')