title: How configure router-view default page in index.js while using vue.js
body: <p>In my project, I use vue.js 2.9.</p>
  
  <p>I have detail.vue page, some html code is like:</p>
  
  <pre><code>&lt;div class="tab"&gt;
   &lt;div class="tab-item"&gt;
     &lt;router-link to='/goods' &gt;goods&lt;/router-link&gt;
   &lt;/div&gt;
   &lt;div class="tab-item"&gt;
    &lt;router-link to='/ratings' &gt;ratings&lt;/router-link&gt;
   &lt;/div&gt;
   &lt;div class="tab-item"&gt;
     &lt;router-link to='/seller' &gt;seller&lt;/router-link&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;keep-alive&gt;
    &lt;router-view &gt;&lt;/router-view&gt;
  &lt;/keep-alive&gt;
  </code></pre>
  
  <p>And the index.js content is like:</p>
  
  <pre><code>export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/detail',
    name: 'Detail',
    component: Detail,
    children: [{
      path: '/goods',
      name: 'Goods',
      component: Goods
    },
    {
      path: '/ratings',
      name: 'Ratings',
      component: Ratings
    },
    {
      path: '/seller',
      name: 'Seller',
      component: Seller
    }]
  }]
  })
  </code></pre>
  
  <p>The problem is the result of router-view after opening detail.vue page is Home, but not goods.</p>
  
  <p>The default router-view result of openning detail.vue page should be goods, not the home page.</p>
  
  <p>I have added content in detail.vue</p>
  
  <pre><code>components: {
  'v-header': header,
  'v-goods': goods
   },
   routes: [{
   path: '/',
   name: 'goods',
   component: goods
   }]
  </code></pre>
  
  <p>and i added content in App.vue</p>
  
  <pre><code>&lt;script type="text/ecmascript-6"&gt;
  import Home from '@/components/home/Home'
  export default {
    name: 'App',
    routes: [{
      path: '/',
      name: 'Home',
      component: Home
     }]
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>But unlucky, it failed again. it showed nothing when open detail.vue. How to configure the index.js? who can help me?</p>