Vue-router: Vue router shows lazy-loaded route components only once

[gholol]

I'm not using SSR btw.

I'm using Laravel 5.3 as a backend and Vue combo (Vue 2.1.6 + Vue-Router + vue resource with vue-loader as my frontend. My project is a single page application (SPA).

Everything worked fine but the resulting dist file was pretty bizzare (4MB.js) so I decided to load each page with lazy loading.
https://router.vuejs.org/en/advanced/lazy-loading.html

This is my app.js:

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

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');

My problem is that... everything (I mean every page) works, chunks are loaded etc, but the page renders only ONCE. As soon as I click on the link to /settings or /user/blahblah it loads all components just fine, but when I come back to the previously visited page (or any other) and try come back to said settings, it doesn't load the route component. Vue devtools doesn't even show that component in the root tree (when I use keep-alive to cache my routes, it shows them as inactive) and there are no warnings at all. When I reload the page it I can use them again, but just once. And so on, and so on...

When I stop using lazy loading and just include it like this

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

It works all the time.

[gholol]

When I change this

const UserSettings = resolve => require(['./components/views/UserSettings.vue'], resolve)            // r => 
const routes = [
   { path: '/settings', component: UserSettings },
]

To

const routes = [
    { path: '/settings', component: function (resolve) {
        require(['./components/views/UserSettings.vue'], resolve) 
    },
]

It works... Why arrow functions are not working?

[fnlctrl]

Hi, thanks for filling this issue. You're probably using webpack 2.0, and this is a known issue.
Solution: simply use System.import()(deprecated in recent versions) or import() instead of require for lazy loading. More info here: https://github.com/vuejs/vue-router/pull/862