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="/foo/123/test#123">/test#123</router-link>
  <router-link to="/foo/123/test#124">/test#1234</router-link>
  <router-view></router-view>
</div>

Babel + JSX

const Home = { template: '<div>Home</div>' }
const Foo = {
template: '<div>Foo</div>',
  computed: {
		templateId() {
    	console.log('called');
    	return parseInt(this.$route.params.id, 10);
    },
    hugeTransaction() {
    	console.log('huge transaction called');
      return this.templateId * 2;
    }
  },
  watch: {
  	hugeTransaction() {
    	console.log('huge transaction watcher called')
    }
  }
}

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

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