Question

该应用程序在每种浏览器上都能正常运行，但是当我在iPad上将其“添加到主屏幕”时，它仅加载“主要”组件，而没有加载任何子组件。

这是我的 main.js ：

import Vue from 'vue'
import router from './router'
import App from '@/App.vue'

Vue.config.productionTip = false

const app = new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')

我的 App.vue ：

<template>
  <div id="app">
    <div class="bg">BEFORE VIEW</div>
    <router-view class="view"></router-view>
    <div class="bg">AFTER VIEW</div>
  </div>
</template>

<script>
    require('./assets/styles.css')
</script>

我的 router / index.js ：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Parent from '@/components/Parent'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Parent },
    { path: '/products',
      component: Parent
    },
    { path: '/clients',
      component: Parent
    },
    { path: '/verticals',
      component: Parent
    }
  ]
})

和 components / Parent.vue ：

<template>
  <div class="parent">
    <p>INSIDE PARENT</p>
  </div>
</template>

<script>
  export default {
    name: 'Parent'
  }
</script>

基本上这是一种幻灯片放映，“父级”组件将检测到当前路线并转到相应的幻灯片。

正如我提到的，该应用程序在台式机（在Chrome上）和iPad（在Safari上）上都可以很好地运行，但是当我执行“将其添加到主屏幕”时，我所看到的只是“查看前”和来自App.vue的“ AFTER VIEW”（并且#app元素具有正确的背景色），但是只是不会加载其中的所有内容。

我觉得自己是个白痴，我确定解决方案仅取决于我所缺少的知识点，但是我似乎找不到其他人遇到足够严重的问题以至于我可以使用他们的解决方案

请帮助，非常感谢您的宝贵时间！

Answer 1

我随机找到一种解决方案，使所需的内容出现。在router / index.js中，我删除了该行

mode: 'history',

老实说，我还不明白为什么它起作用，但是确实可以。我会再看的。

感谢所有看过我的问题的人！

Vue应用程序无法独立加载组件（无错误消息）

1 个答案: