title: vue-router default child route for tabs
body: <p>I'm trying to have a homepage with tabs containing 2 lists, with 1 open by default. </p>
  
  <p>I have the following route config, I've changed the names to simplify</p>
  
  <pre><code>let routes = [{
      path: '/',
      name: 'home',
      component: require('./views/Home.vue'),
      children: [{
          path: 'list1',
          name: 'home.list1',
          component: require('./views/List1.vue')
      }, {
          path: 'list2',
          name: 'home.list2',
          component: require('./views/List2.vue')
      }]
  }
  </code></pre>
  
  <p>Inside <code>./views/Home.vue</code> I have a <code>&lt;router-view&gt;&lt;/router-view&gt;</code> below 2 <code>&lt;router-link&gt;</code>s for each tab (child route).</p>
  
  <p>When I visit the app route <code>http://domain/</code> I would like to activate the <code>list1</code> tab. The only way I can currently do this is if I visit <code>http://domain/list1</code>.</p>
  
  <p>I have tried</p>
  
  <pre><code>children: [{
      path: '',
      name: 'home.list1'
  </code></pre>
  
  <p>and this initially works well, however if I visit <code>http://domain/list2</code> both my tab links (router-links) have the active state.</p>
  
  <p><a href="http://jsfiddle.net/wtpuevc6/33/" rel="noreferrer">JSFiddle</a> which I can't get to run but helps for context</p>
  
  <p>Is there a better solution to this?</p>