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

【问题标题】：Vue app fails to load component on standalone (no error message)Vue 应用程序无法独立加载组件（无错误消息）
【发布时间】：2018-11-30 20:55:28
【问题描述】：

该应用程序在每个浏览器上都可以正常运行，但是当我在 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>

我的路由器/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>

基本上这是一种幻灯片放映，Parent 组件会检测当前的 Route 并转到相应的幻灯片。

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

我觉得自己像个白痴，我确信解决方案仅取决于我缺少的一些知识，但我似乎找不到其他人的问题与我的问题足够接近，我可以使用他们的解决方案.

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

【问题讨论】：

您使用什么逻辑来检测route.path 更改？ v-if="route.path == '/whateverthepath'"?通常在引用children 时，您的父路由/ 将有一个嵌套的子路由数组...
是的，我做到了；为了得到答案，我简化了 router/index.js 的内容。但是，是的，通常情况下，我的每张“父”幻灯片都会有孩子。

标签： vue-router

【解决方案1】：

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

mode: 'history',

老实说，我还不明白它为什么会起作用，但确实如此。我再看看。

感谢所有关注我问题的人！

【讨论】：