Vue 路由器只显示一次延迟加载的路由组件答案

【问题标题】：Vue router shows lazy-loaded route components only onceVue 路由器只显示一次延迟加载的路由组件
【发布时间】：2017-05-08 17:07:06
【问题描述】：

我使用 Laravel 5.3 作为后端，使用 Vue 组合（Vue 2.1.6 + Vue-Router + vue 资源 + 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'

它一直有效。

【问题讨论】：

router.vuejs.org/en/advanced/lazy-loading.html 当我使用 AMD 风格 require 时，我遇到了同样的问题。 CommonJS 风格，require.ensure 工作正常。我还不知道为什么。

标签： javascript webpack vue.js vue-router

【解决方案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`);

【讨论】：