在Vue Router中将异步组件与加载和错误组件一起使用

时间:2019-02-01 09:14:26

标签: javascript vue.js webpack vue-router async-components

我正在尝试执行以下操作:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import LoadingComponent from '@/components/Loading.vue';

Vue.use(Router);

const router = new Router({
    routes: [
        {
            path: "/",
            name: "home",
            component: Home
        },
        {
            path: "/about",
            name: "about",
            component: () => ({
                component: import("./views/About.vue"),
                loading: LoadingComponent,
                delay: 1
            })
        }
    ]
});

export default router;

即使我将网络设置为Slow 3G,加载组件也永远不会显示。 仅当我在路由器中使用异步组件时,这种情况才会发生,其他所有加载组件都会在延迟之后显示。

Vue Router不支持此操作吗?还是我做错了什么?

1 个答案:

答案 0 :(得分:0)

我通过在vue-router上查找github问题来找到了这个问题的答案。事实证明,您不能只使用文档暗示的异步组件。

要在这里引用:https://github.com/vuejs/vue-router/pull/2140/files?short_path=7d99926#diff-7d999265ce5b22152fdffee108ca6385

路由目前只能解析为Vue路由器中的单个组件。因此,要完成这项工作,您将需要一个辅助函数来创建一个中间组件,如下所示:

Observable<boolean>

然后您将可以将其与Vue Router一起使用,如下所示:

const lazyLoadRoute = AsyncView => {
    const AsyncHandler = () => ({
        component: AsyncView,
        loading: Spinner
    });

    return Promise.resolve({
        functional: true,
        render(h, {data, children}) {
            // Transparently pass any props or children
            // to the view component.
            return h(AsyncHandler, data, children);
        }
    });
};

希望这对尝试找到像我一样的人很有帮助!