vue-router 2 router

Template for vue-router 2

by Keerthi Kumar P

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<!-- <button id="app1" onclick="loadapp1()">
app1
</button>
<button id="app2" onclick="loadapp2()">
app2
</button> -->
<div id="appContainer">
<div id="app">

</div>
</div>

Babel + JSX

const Home = { template: '<div>Home</div>' }
const Foo = { template: '<div>Foo</div>' }

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

const app1 = new Vue({
  router: router1,
  template: '<div>App1<router-view></router-view></div>',
  data: {
    msg: 'Hello World'
  },
  mounted(){
  this.$router.push('/foo');
  }
}).$mount();

const Home2 = { template: '<div>Home2</div>' }
const Foo2 = { template: '<div>Foo2</div>' }

const router2 = new VueRouter({
  mode: 'abstract',
  routes: [
    { path: '/', component: Home2 },
    { path: '/foo', component: Foo2 }
  ]
})

const app2 = new Vue({
	router: router2,
  template: '<div>App2<router-view></router-view></div>',
  data: {
    msg: 'Hello World'
  },
  mounted(){
  this.$router.push('/foo');
  }
})

const router = new VueRouter({
  mode: 'abstract',
  routes: [
    { path: '/app1', component: app1 },
    { path: '/app2', component: app2 }
  ]
})

const app = new Vue({
	router,
  el: '#app',
  template: `<div>
  <router-link to="/app1">/app1</router-link>
  <router-link to="/app2">/app2</router-link>
  <router-view></router-view>
</div>`,
  data: {
    msg: 'Hello World'
  }
})
//app2.$mount('#app')

function loadapp1(){
console.log('app2.$el');
console.log(typeof app2.$el === 'undefined');
if(app2.$el){
app2.$destroy();
app2.$el.parentNode.removeChild(app2.$el);

}
const appEl = document.createElement('div');
appEl.id = 'app';
document.getElementById('appContainer').appendChild(appEl);
app1.$mount('#app')
}

function loadapp2(){
console.log('app1.$el');
console.log(typeof app1.$el === 'undefined');
if(app1.$el){
app1.$destroy();
app1.$el.parentNode.removeChild(app1.$el);

}
const appEl = document.createElement('div');
appEl.id = 'app';
document.getElementById('appContainer').appendChild(appEl);
app2.$mount('#app')
}