Vuejs2 带子路由的Vue路由器拆分屏幕

对不起，如果我的标题含糊不清，但我想不出更好的描述

现在我正在尝试做一个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>

我的想法
添加
家
命令
克拉滕
{{item}}
更多
删除
导出默认值{
数据（）{
返回{
项目：[]
}
},
方法：{
addOrder（）{
变量日期=新日期（）；
this.items.push（“订单”+date.getDate（）+”-“
+（date.getMonth（））+“-”
+date.getFullYear（）+“@”
+date.getHours（）+“：”
+date.getMinutes（）+“：”
+date.getSeconds（））
}
}
}

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>

我的想法
添加
家
命令
克拉滕
{{item}}
更多
删除
导出默认值{
数据（）{
返回{
项目：[]
}
},
方法：{
addOrder（）{
变量日期=新日期（）；
this.items.push（“订单”+date.getDate（）+”-“
+（date.getMonth（））+“-”
+date.getFullYear（）+“@”
+date.getHours（）+“：”
+date.getMinutes（）+“：”
+date.getSeconds（））
}
}
}

我之所以将

pagefromword

页面设为子页面，是因为我想重复使用菜单。还是这是错误的方法

---

一般来说，我对vue和javascript非常陌生。非常感谢您的指点

事实证明，这实际上是一个类星体框架元素的问题，而不是Vue/Vue路由器的问题，真糟糕

我做错的是：

---

我在带有子项的路由器页面

pagefromword.vue

中定义了一个索引（

Index.vue

）

pagefromword.vue

是根据我的路由配置的

index.vue

的子页面。索引中有

和

标记，但随后我还在

页面fromWords.vue

中添加了另一个

——这导致DOM混乱。所以为了修复它，我不得不从pagefromwords.vue中删除

标记。

你能把它组装成一个JSFIDLE吗？@Austio很遗憾，我正在使用Quasar framework（）属性来开发混合移动应用程序，而我不能将其包含在JSFIDLE中。上面没有关于类星体框架的标签，所以我很抱歉，为什么不在帖子上呢