带有子路由的Vue路由器拆分屏幕答案

【问题标题】：Vue Router splitting screen with children routes带有子路由的Vue路由器拆分屏幕
【发布时间】：2017-02-21 15:58:34
【问题描述】：

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

现在我正在尝试制作一个 SPA（用于移动设备），但我的路由出现了这个问题：路由的子节点的屏幕被分成两半。

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

然后是子页面“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
  ]
})

索引.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 很陌生。任何指针都非常感谢！

【问题讨论】：

你能把它组装成一个 jsfiddle 吗？
@Austio 遗憾的是，我正在使用 Quasar 框架 (quasar-framework.org) 属性来开发无法包含在 jsfiddle 中的混合移动应用程序。在 SO 上没有 Quasar 框架的标签，因此为什么它不在帖子上，我很抱歉

标签： vuejs2 vue-router

【解决方案1】：

事实证明这实际上是 Quasar Framework 元素的问题，而不是 Vue / Vue 路由器，所以我很糟糕！

我做错的是：

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

【讨论】：