在 Vue Router 中使用带有加载和错误组件的异步组件答案

【问题标题】：Using async components with loading and error components in Vue Router在 Vue Router 中使用带有加载和错误组件的异步组件
【发布时间】：2019-06-25 20:11:47
【问题描述】：

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

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 不支持还是我做错了什么？

【问题讨论】：

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

【解决方案1】：

我通过挖掘 vue-router 上的 github 问题找到了这个问题的答案。事实证明，您不能像文档暗示的那样只使用异步组件。

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

Routes 目前只能解析为 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);
        }
    });
};

然后您就可以像这样与 Vue 路由器一起使用它：

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

希望这对其他像我一样试图找到它的人有所帮助！

【讨论】：