vue-router 2 template

Template for vue-router 2

by Robodude

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-view></router-view>
</div>

Babel + JSX

var iframeUrl1 = "http://www.ask.com"
var iframeUrl2 = "http://www.dogpile.com"

const Home = { 
	template: '<div>Home</br><router-link to="/foo/ask">Ask.com</router-link><router-link to="/foo/dog">Dogpile.com</router-link></div>' 
}
const Foo = { 
	template: '<div>{{this.id}}</br><iframe :src="url"></iframe></div>',
  props: ["id"],
  data(){
  	return {
    	url: "",
      timer: undefined
    }
  },
  created(){
  	this.init(this.id)
    this.timer = setInterval(() => {
    	this.init(this.id)
    }, 500)
  },
  destroyed(){
  	clearInterval(this.timer);
  },
  methods: {
  	fakeApi(id){
    	return new Promise(resolve => {
        setTimeout(() => { resolve(id === "ask" ? iframeUrl1 : iframeUrl2) }, 0)
      })
    },
  	init(id){
    	this.fakeApi(id).then(result => {
      	console.log(result)
      	this.url = result
      })
    }
  }
}

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

new Vue({
	router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})