vue-router 2 template

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>

Babel + JSX

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

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

const app1 = new Vue({
  router,
  template: '<div>App1<router-link to="/">/Home</router-link><router-link to="/foo">/foo</router-link><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-link to="/">/Home</router-link><router-link to="/foo">/foo</router-link><router-view></router-view></div>',
  data: {
    msg: 'Hello World'
  },
  mounted(){
  this.$router.push('/foo');
  }
}).$mount();

//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')
 */
 const element = document.getElementById('appContainer');
 while (element.firstChild) {
    element.removeChild(element.firstChild)
  }
  element.appendChild(app1.$el);
 }

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') */
 const element = document.getElementById('appContainer');
 while (element.firstChild) {
    element.removeChild(element.firstChild)
  }
 ...