将异步组件与Vue Router中的加载和错误组件一起使用
将异步组件与Vue Router中的加载和错误组件一起使用
提问于 2019-02-01 17:14:26
我正在尝试做以下几件事：
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
Stack Overflow用户
发布于 2019-11-29 00:00:11
我通过深入研究vue-router上的github问题找到了这个问题的答案。事实证明，你不能像文档所暗示的那样只使用异步组件。
路由当前只能解析到Vue Router中的单个组件。因此，要实现这一点，您需要一个helper函数来创建一个中间组件，如下所示：
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 Router，如下所示：
const router = new Router({
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
component: () => lazyLoadRoute(import("./views/About.vue"))
}
]
});希望这篇文章能对其他像我一样想找到它的人有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54476294
复制相关文章
相似问题
腾讯云开发者
