Question

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

现在我正在尝试制作一个SPA（移动设备），但我的路由已经出现了这个问题：该路线的孩子将他们的屏幕分成两半。

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

然后是一个子页面＆＃34; Page＆＃34;：

对于＆＃34; Klanten＆＃34;它也是如此。 - 他们是相同的路线，只是一个不同的参数。

我也使用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

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

我做错了是这样的：

我在路由器中定义了一个带有子页面index.vue的索引（pagefromword.vue）。根据我的路由配置，pagefromword.vue是index.vue的子页面。索引包含<template>和<q-layout>标记，但之后我还在<q-layout>中添加了另一个pagefromwords.vue - 这导致DOM混乱。因此，为了解决这个问题，我必须从pagefromwords.vue中删除<q-layout>标记。

Vue路由器分裂屏幕与儿童路线

1 个答案: