Vue子ルートを持つルータ分割画面

Question

申し訳ありませんが、私のタイトルが曖昧ですが、より良い説明はできません。

今私はSPA（モバイル用）を作ろうとしていますが、私のルーティングではこの問題が起こっています。ルートの子供たちは画面を半分に分割しています。

これらの2つの画像は、おそらく問題をよりよく説明しています。 ホームページ：

そして、子ページ「ページ」：それはまた、「Klanten」について同じことを

- 彼らは、ちょうど別のパラメータと同じルートです。

ビューを構築するためにQuasar Frameworkも使用しますが、問題の原因とは思われません。私はルーティングが間違っていると思う。

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

実際には、Vue/Vueルータではなく、Quasar Framework要素の問題でした。私は子供のページpagefromword.vueとルータのインデックス（index.vue）を定義し

：私が間違っていた何

は、このでした。 pagefromword.vueは私のルーティング設定に従ったindex.vueの子ページです。インデックスには<template>タグと<q-layout>タグがありますが、pagefromwords.vueにはもう1つの<q-layout>が追加されていますが、これが原因でDOMが乱雑になっていました。だから私は<q-layout>タグをpagefromwords.vueから削除しなければならなかった。