title: Understanding Vue routing
body: <p>I am trying to understand vue-router. But so far I was not able to get what I need.  In simple terms, when I go to <code>example.com</code>, it should show the <code>Home</code> component and if I go to <code>example.com/:id</code>, I want <code>SavedComparator</code> component to be loaded. My <code>router.js</code> is as below:</p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import Home from './views/Home.vue'
  import SavedComparator from './views/SavedComparator.vue'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        component: Home,
        children: [
          {
            path: '/:id',
            component: SavedComparator
          }
        ]
      }
    ]
  })
  </code></pre>
  
  <p>In my <code>App.vue</code>, I have below code segment:</p>
  
  <pre><code>&lt;v-content&gt;
     &lt;h2&gt;params: {{ $route.params.id }}&lt;/h2&gt;
     &lt;router-view /&gt;
  &lt;/v-content&gt;
  </code></pre>
  
  <p>But when I go to <code>example.com/h8s7f</code>, it always shows <code>Home</code> component. In addition, <code>$route.params.id</code> in <code>App.vue</code> doesn't print anything.</p>