Javascript Vue路由器仅显示一次延迟加载的路由组件

我使用Laravel 5.3作为后端，Vue组合（Vue 2.1.6+Vue路由器+Vue资源+gulp/webpack等）作为前端。我的项目是一个单页应用程序（SPA）

在我决定用延迟加载加载每个页面之前，一切都很顺利。

这是我的app.js：

import store from './components/vuex/store.js'
import App from './components/App.vue';

const UserPage = r => require.ensure([], () => r(require('./components/views/UserPage.vue')), 'group-ip')
const UserSettings = resolve => require(['./components/views/UserSettings.vue'], resolve)            // r => require.ensure([], () => r(require('./components/views/PlayerSettings.vue')), 'group-settings')
const Hub = resolve => require(['./components/views/Hub/Hub.vue'], resolve)


const routes = [
  { path: '/', component: UserPage },
  { path: '/settings', component: UserSettings },
  { path: '/user/:id', component: Hub },
  { path: '*', redirect: '/' }
]

const router = new VueRouter({
  mode: 'history',
  routes
})


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

我的问题是。。。每件事（我指的是每一页）都有效，但只有一次。只要我点击/settings或

/user/blahblah

的链接，它就会加载所有组件，但当我返回到之前访问的页面时，它不会加载其组件。Vue devtools甚至没有在根目录树中显示该组件（当我使用keep alive缓存路由时，它会将它们显示为非活动），并且根本没有任何警告。当我重新加载页面时，我可以再次使用它们，但只能使用一次。等等，等等

当我停止使用惰性加载并像这样包含它时

import Hub from './components/views/Hub/Hub.vue'

---

它一直在工作

下面是我如何处理路由器组件的延迟加载 仅当您使用babel/webpack/vue cli等时，此选项才有效。。。因为它是ES6

在我的路由器文件夹中，我有

index.js

import Vue from 'vue';
import Router from 'vue-router';
import lazyLoading from './lazyLoading';

Vue.use(Router);

const router = new Router({
    mode: 'history',
    linkActiveClass: 'active-route',
    routes: [
        {
            path: '/',
            name: 'app',
            components: {
                default: lazyLoading('YourComponent'), 
            },
        },
        {
            path: '/somepath',
            name: 'somename',
            components: {
                default: lazyLoading('YourSecondComponent'),
            },
        },
        {
            path: '*',
            redirect: '/',
        },
    ],
});

export default router;

如果您的组件在文件夹中的名称为index.vue，请执行此操作

在这里调整导入url以在项目中找到正确的路径

lazyLoading('YourFolder', true)

lazyloading.js

export default (name, index = false) => () => import(`../components/${name}${index ? '/index' : ''}.vue`);

当我使用AMD style

require

时，我也遇到了同样的问题。CommonJS风格，

需要。确保

工作正常。我还不知道为什么。