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-link to="/foo">/foo</router-link>
  <router-view></router-view>
</div>

Babel + JSX

const Home = { template: '<div>Home</div>' };
const Bar = { template: '<div>Bar</div>' };
const Baz = { template: '<div>Baz</div>' };

const Foo = { 
  template: `
    <div>
      <div>Foo</div>
      <router-link to="/foo/bar">/foo/bar</router-link>
      <router-link to="/foo/baz">/foo/baz</router-link>
      <router-view></router-view>
    </div>
  `,
  created() {
    let { routes } =this.$router.options;
    let routeData = routes.find(r => r.path === this.$route.path);
    routeData.children = [
      { path: 'bar', component: Bar },
      { path: 'baz', component: Baz },      
    ]
    this.$router.addRoutes([routeData])
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

new Vue({
	router,
  el: '#app'
})