具有 children 路由的 Vue Router 分屏

Question

抱歉，如果我的标题含糊不清，但我想不出更好的描述。

现在我正在尝试制作一个 SPA（用于移动设备），但我的路由遇到了这个问题：child路由的人将他们的屏幕分成两半。

也许这两张图更能说明问题。主页：

然后是 child 页面 "Page"：

它也对 "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 页面设为 child 的原因是我想 re-use 菜单。或者这是错误的方法？

我对 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> 标签

具有 children 路由的 Vue Router 分屏

Vue Router splitting screen with children routes

vue-router

vuejs2