Vue Router splitting screen with children routes - vuejs2

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!

Answer 1

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.