Question

我正在使用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：

/user/blahblah

我的问题是......一切（我的意思是每一页）都有效，但只有一次。一旦我点击/ settings或import Hub from './components/views/Hub/Hub.vue'的链接，它就可以正常加载所有组件，但是当我回到之前访问过的页面时，它不会加载其组件。 Vue devtools甚至没有在根树中显示该组件（当我使用keep-alive来缓存我的路由时，它将它们显示为非活动状态）并且根本没有警告。当我重新加载页面时，我可以再次使用它们，但只需一次。依此类推，等等......

当我停止使用延迟加载时，只需像这样包含它

public String login(){
    new SampleClass3().method(sam);//need to mock this line
    return "welcome to login page";
}

它始终有效。

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，则在文件夹中执行此操作。

此处调整导入网址以在项目中找到正确的路径。

lazyLoading('YourFolder', true)

lazyloading.js

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

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

1 个答案: