javascript - 在Vue Router中将异步组件与加载和错误组件一起使用(Using async components with loading and error components in Vue Router)

Question

I am trying to do the following:

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

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;

However loading component is never showing, even when I set network to Slow 3G .

(但是，即使将网络设置为Slow 3G ，加载组件也永远不会显示。)

This happens only when I use async components in router, everywhere else loading components shows after delay.

(仅当我在路由器中使用异步组件时，才会发生这种情况，其他所有加载组件都会在延迟之后显示。)

Is this not supported by Vue Router or am I doing something wrong?

(Vue路由器不支持此功能吗，或者我做错了什么？)

  ask by Filip Egeric translate from so

Answer 1

I came across the answer to this question by digging through github issues on vue-router.

(我通过在vue-router上挖掘github问题来找到了这个问题的答案。)

It turns out you can't just use async components like the docs imply you can.

(事实证明，您不能只使用文档暗示的异步组件。)

To quote from here: https://github.com/vuejs/vue-router/pull/2140/files?short_path=7d99926#diff-7d999265ce5b22152fdffee108ca6385

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

Routes can currently only resolve to a single component in Vue Router.

(路由当前只能解析为Vue路由器中的单个组件。)

So to make this work, you'll need a helper function to create an intermediary component, like this:

(因此，要使其工作，您将需要一个辅助函数来创建一个中间组件，如下所示：)

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

which you would then be able to use with Vue Router like so:

(然后您就可以将其与Vue Router一起使用，如下所示：)

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

Hope this is helpful for anyone else who's trying to find this like I was!

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