vue-router 2 template

Template for vue-router 2

HTML

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

<div id="app">
  
  <router-link to="/">/home</router-link>
  <router-view :bus="bus"></router-view>

  <create-button :link="createLink" />
</div>

Babel + JSX

const Home = { template: '<div>Home template</div>' }
const UserCreate = { 
	template: '<div>UserCreate template</div>',
  props: ['bus'],
  mounted(){
    this.$nextTick(function () {
      this.bus.$emit('change-view', '/user-delete');
    })
  }
}

const UserDelete = { 
	template: '<div>UserDelete template</div>',
  props: ['bus'],
  mounted(){
    this.$nextTick(function () {
      this.bus.$emit('change-view', '/user-create');
    })
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/user-create', component: UserCreate },
    { path: '/user-delete', component: UserDelete }
  ]
})

Vue.component('CreateButton', {
  props: ['link'],
  template: `<router-link :to="link">+</router-link>`
})

new Vue({
	router,
  el: '#app',
  data() {
    return {
      	bus: this,
        createLink: '/user-create',
     }
  },
  mounted() {
   this.bus.$on('change-view', this.changeView)
  },
  methods: {
    changeView(link){
			this.createLink = link
    }
  }
})