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>標記。