Vue Router splitting screen with children routes

Question

Sorry if my title is vague but I can't think of a better description.

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.

Perhaps these two images describe the problem better. Home page:

Then a child page "Page":

It also does the same for "Klanten" - they're the same route, just a different parameter.

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.

Router.js:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

function load (component) {
  return () => 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
  ]
})

Index.vue

<template>
  <q-layout>
    <div slot="header" class="toolbar bg-cyan-2" >
      <q-toolbar-title :padding="1" class="text-center text-blue-10">
        MyNotion
      </q-toolbar-title>
      <button class="text-blue-10" @click="addOrder">
      <i>add</i>
    </div>
    <q-tabs slot="navigation" class="bg-blue-10">
      <q-tab route="/">
          Home
      </q-tab>
      <q-tab route="/page/orders">
          Orders
      </q-tab>
      <q-tab route="/page/klanten">
          Klanten
      </q-tab>
    </q-tabs>
    <router-view class="layout-view" ></router-view>
        <div class="layout-view">

      <div class="list">
        <div v-for="(item, index) in items" class="item">
          <div class="item-content has-secondary">
            <div>{{item}}</div>
          </div>
          <div class="item-secondary">
            <i slot="target">
        more_vert
        <q-popover  :ref="'popover'">
          <div class="list">
            <div class="item item-link">
              <div class="item-content">Delete</div>
            </div>
          </div>
        </q-popover>
      </i>
          </div>
        </div>
      </div>
    </div>
  </q-layout>
</template>
<script>
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())
    }
  }
}
</script>

pagefromword.vue

<template>
  <q-layout>
    <div slot="header" class="toolbar bg-cyan-2" >
      <q-toolbar-title :padding="1" class="text-center text-blue-10">
        MyNotion
      </q-toolbar-title>
      <button class="text-blue-10" @click="addOrder">
      <i>add</i>
    </div>
    <q-tabs slot="navigation" class="bg-blue-10">
      <q-tab route="/">
          Home
      </q-tab>
      <q-tab route="/page/orders">
          Orders
      </q-tab>
      <q-tab route="/page/klanten">
          Klanten
      </q-tab>
    </q-tabs>
    <router-view class="layout-view" ></router-view>
        <div class="layout-view">

      <div class="list">
        <div v-for="(item, index) in items" class="item">
          <div class="item-content has-secondary">
            <div>{{item}}</div>
          </div>
          <div class="item-secondary">
            <i slot="target">
        more_vert
        <q-popover  :ref="'popover'">
          <div class="list">
            <div class="item item-link">
              <div class="item-content">Delete</div>
            </div>
          </div>
        </q-popover>
      </i>
          </div>
        </div>
      </div>
    </div>
  </q-layout>
</template>
<script>
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())
    }
  }
}
</script>

The reason I am making the pagefromword page a child is because I want to re-use the menu. Or is this the wrong approach?

I'm very new to vue and javascript in general. Any pointers are greatly appreciated!

@Austio sadly I am using the Quasar framework (quasar-framework.org) attributes for developing hybrid mobile apps which I can't include in jsfiddle. There wasn't a tag for the Quasar framework on SO hence why it's not on the post, my apologies — nbokmans

nbokmans nbokmans · Accepted Answer · 2017-02-22T14:44:05

Turns out it was actually an issue with a Quasar Framework element, not Vue / Vue Router so my bad!

What I did wrong was this:

I defined an Index (index.vue) in the router with children page pagefromword.vue. pagefromword.vue is a child page of index.vue according to my routing config. Index has the <template> and <q-layout> tags, but then I also added another <q-layout> in the pagefromwords.vue - which was causing the DOM to be messed up. So to fix it I had to remove the <q-layout> tag from pagefromwords.vue.

Vue Router splitting screen with children routes

1 Answers