title: Vue Router splitting screen with children routes
body: <p>Sorry if my title is vague but I can't think of a better description.</p>
  
  <p>Right now I'm trying to make a SPA (for mobile) but I've got this issue going on with my routing: children of the route are having their screen split in half.</p>
  
  <p>Perhaps these two images describe the problem better.
  Home page:
  <a href="https://i.stack.imgur.com/sv1kX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sv1kX.png" alt="Home page"></a></p>
  
  <p>Then a child page "Page":
  <a href="https://i.stack.imgur.com/qMiVc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qMiVc.png" alt="Orders child page"></a></p>
  
  <p>It also does the same for "Klanten" - they're the same route, just a different parameter.</p>
  
  <p>I also use Quasar Framework for building the views - but I don't think they are causing the problem. I suspect I set up my routing wrong.</p>
  
  <p>Router.js:</p>
  
  <pre><code>import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  Vue.use(VueRouter)
  
  function load (component) {
    return () =&gt; System.import(`components/${component}.vue`)
  }
  
  export default new VueRouter({
    /*
     * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
     * it is only to be used only for websites.
     *
     * If you decide to go with "history" mode, please also open /config/index.js
     * and set "build.publicPath" to something other than an empty string.
     * Example: '/' instead of current ''
     *
     * If switching back to default "hash" mode, don't forget to set the
     * build publicPath back to '' so Cordova builds work again.
     */
  
    routes: [
      { path: '/', component: load('Index'),  children: [
          { path: '/page/:word', component: load('pagefromword') }
        ] }, // Default
      { path: '*', component: load('Error404') }, // Not found
    ]
  })
  </code></pre>
  
  <p>Index.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;q-layout&gt;
      &lt;div slot="header" class="toolbar bg-cyan-2" &gt;
        &lt;q-toolbar-title :padding="1" class="text-center text-blue-10"&gt;
          MyNotion
        &lt;/q-toolbar-title&gt;
        &lt;button class="text-blue-10" @click="addOrder"&gt;
        &lt;i&gt;add&lt;/i&gt;
      &lt;/div&gt;
      &lt;q-tabs slot="navigation" class="bg-blue-10"&gt;
        &lt;q-tab route="/"&gt;
            Home
        &lt;/q-tab&gt;
        &lt;q-tab route="/page/orders"&gt;
            Orders
        &lt;/q-tab&gt;
        &lt;q-tab route="/page/klanten"&gt;
            Klanten
        &lt;/q-tab&gt;
      &lt;/q-tabs&gt;
      &lt;router-view class="layout-view" &gt;&lt;/router-view&gt;
          &lt;div class="layout-view"&gt;
  
        &lt;div class="list"&gt;
          &lt;div v-for="(item, index) in items" class="item"&gt;
            &lt;div class="item-content has-secondary"&gt;
              &lt;div&gt;{{item}}&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item-secondary"&gt;
              &lt;i slot="target"&gt;
          more_vert
          &lt;q-popover  :ref="'popover'"&gt;
            &lt;div class="list"&gt;
              &lt;div class="item item-link"&gt;
                &lt;div class="item-content"&gt;Delete&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/q-popover&gt;
        &lt;/i&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/q-layout&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data () {
      return {
        items: []
      }
    },
    methods: {
      addOrder() {
        var date = new Date();
        this.items.push("Order "  + date.getDate() + "-"
                  + (date.getMonth())  + "-" 
                  + date.getFullYear() + " @ "  
                  + date.getHours() + ":"  
                  + date.getMinutes() + ":" 
                  + date.getSeconds())
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>pagefromword.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;q-layout&gt;
      &lt;div slot="header" class="toolbar bg-cyan-2" &gt;
        &lt;q-toolbar-title :padding="1" class="text-center text-blue-10"&gt;
          MyNotion
        &lt;/q-toolbar-title&gt;
        &lt;button class="text-blue-10" @click="addOrder"&gt;
        &lt;i&gt;add&lt;/i&gt;
      &lt;/div&gt;
      &lt;q-tabs slot="navigation" class="bg-blue-10"&gt;
        &lt;q-tab route="/"&gt;
            Home
        &lt;/q-tab&gt;
        &lt;q-tab route="/page/orders"&gt;
            Orders
        &lt;/q-tab&gt;
        &lt;q-tab route="/page/klanten"&gt;
            Klanten
        &lt;/q-tab&gt;
      &lt;/q-tabs&gt;
      &lt;router-view class="layout-view" &gt;&lt;/router-view&gt;
          &lt;div class="layout-view"&gt;
  
        &lt;div class="list"&gt;
          &lt;div v-for="(item, index) in items" class="item"&gt;
            &lt;div class="item-content has-secondary"&gt;
              &lt;div&gt;{{item}}&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="item-secondary"&gt;
              &lt;i slot="target"&gt;
          more_vert
          &lt;q-popover  :ref="'popover'"&gt;
            &lt;div class="list"&gt;
              &lt;div class="item item-link"&gt;
                &lt;div class="item-content"&gt;Delete&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/q-popover&gt;
        &lt;/i&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/q-layout&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data () {
      return {
        items: []
      }
    },
    methods: {
      addOrder() {
        var date = new Date();
        this.items.push("Order "  + date.getDate() + "-"
                  + (date.getMonth())  + "-" 
                  + date.getFullYear() + " @ "  
                  + date.getHours() + ":"  
                  + date.getMinutes() + ":" 
                  + date.getSeconds())
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The reason I am making the <code>pagefromword</code> page a child is because I want to re-use the menu. Or is this the wrong approach?</p>
  
  <p>I'm very new to vue and javascript in general. Any pointers are greatly appreciated!</p>