Маршрутизатор Vue показывает компоненты с лёгкой загрузкой только один раз

Question

Я использую Laravel 5.3 в качестве backend и Vue combo (Vue 2.1.6 + Vue-Router + vue resource + gulp/webpack и т. Д.) В качестве моего интерфейса. Мой проект - одностраничное приложение (SPA).

Все работало нормально, пока я не решил загрузить каждую страницу с ленивой загрузкой. https://router.vuejs.org/en/advanced/lazy-loading.html

Это мой 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' 

Он работает все время.

Answer 1

Вот как я дело с ленивой загрузки маршрутизатора компонентов Это будет работать только если вы используете 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`);