Vue路由器拆分屏幕与儿童路线

Question

对不起，如果我的标题是模糊的，但我想不出一个更好的描述。

现在我正在尝试做一个SPA（移动），但我的这个问题正在继续我的路由：路由的孩子正在将他们的屏幕分成两半。

也许这两个图像更好地描述了这个问题。 主页：

然后，子页面“页面”：

它也确实为“Klanten”相同 - 它们是相同的路线，只是不同的参数。

我也使用Quasar框架来构建视图 - 但我不认为它们导致了问题。我怀疑我设置了错误的路由。

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> 

的原因，我使pagefromword页面一个孩子是因为我想重新使用菜单。或者这是错误的方法？

我对vue和javascript一般都很陌生。任何指针都非常感谢！

Answer 1

原来，这实际上是Quasar Framework元素的问题，而不是Vue/Vue Router，所以我的不好！

我所做的错误是这样的：

我与孩子pagefromword.vue页路由器定义的索引（index.vue）。根据我的路由配置，pagefromword.vue是index.vue的子页面。索引有<template>和<q-layout>标签，但后来我又在pagefromwords.vue中添加了另一个<q-layout> - 这导致了DOM被搞乱。所以要解决它，我必须从pagefromwords.vue删除<q-layout>标记。