javascript - 在 Vue Router 中使用带有加载和错误组件的异步组件
问题描述
我正在尝试执行以下操作:
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路由器不支持这个还是我做错了什么?
解决方案
我通过挖掘 vue-router 上的 github 问题找到了这个问题的答案。事实证明,您不能只使用文档所暗示的异步组件。
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 Router 一起使用它:
const router = new Router({
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/about",
name: "about",
component: () => lazyLoadRoute(import("./views/About.vue"))
}
]
});
希望这对其他像我一样试图找到这个的人有所帮助!
推荐阅读
- asp.net-core - 参数绑定到 ASP.NET MVC Core 中的路由或查询字符串
- sharepoint-online - 如何在 Webpart 属性 spfx 的下拉列表中获取 SharePoint 在线网站中存在的各种列表
- python - 如何让这个函数接受可以是浮点数、数组或列表的值?
- node.js - 如何使用带有 .ts 文件类的某些输入的 npm 包?
- java - JAVAFX SortedList 不排序。(并使其破坏列排序。)
- c++ - 为什么 std::valarray 没有 std::data() 重载?
- android - 设置自定义背景颜色时,浮动操作按钮背景颜色在禁用时不会更改
- html - 来自 HtmlWeb 的 HTMLAgilityPack 缺少 HTML 节点
- blockchain - 无法在节点和运行时之间转换参数“tx”:解码字段 CheckMortality.0 时出错
- sql - 选择多个 PRIMARY KEY