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

Babel + JSX

const Home = { 
	template: `
  			<div>
        	Home 
          
          <router-link to="{ name: 'home.list1' }">Tab 1 (this should be active when route is /)</router-link>	
          <router-link to="{ name: 'home.list2' }">Tab 2 (this should be active when route is /list2)</router-link> 
          
          <!-- What actually happens is when route is /list2 both Tab1 and Tab2 links have "router-link-active" classes -->
          
          <router-view></router-view>
        </div>`
}
            
const List1 = { template: '<div> list 1 </div>' }
const List2 = { template: '<div> list 2 </div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { 
    	path: '/', 
      name: 'home',
      component: Home,
      children: [{
      	path: '/',
        name: 'home.list1',
        component: List1
      }, {
      	path: 'list2',
        name: 'home.list2',
        component: List2
      }]
    }
  ]
})

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