使用 Promises 为命名视图导入动态 Vue 路由器

Question

我正在尝试为 Vue-Router 动态加载我的组件视图。使用的 import 语句是一个承诺，但它总是返回一个承诺而不是实际值作为返回值，即使我链接“.then”只是包含承诺 returns 另一个承诺。请问我做错了什么？

generatedRoute['component'] = {
                filter_menu_view: import(`../../${this._filter_menu_view_path}.vue`).then((resolve) => resolve),
                action_page_view: action_page_view.then((resolve) => {
                    return resolve
                }).then((resolve2) => {
                    console.log(resolve2);
                    return resolve2
                }),
            }

基本上，我尝试实现此 https://router.vuejs.org/guide/essentials/named-views.html 但使用导入延迟加载视图。谢谢

Answer 1

因为then也returns答应了。

您的代码看起来很奇怪，所以很难说出您要做什么，但通常在使用动态导入时 Vue 期望 a function returning promise

所以改变

filter_menu_view: import(`../../${this._filter_menu_view_path}.vue`).then((resolve) => resolve)

为

filter_menu_view: () => import(`../../${this._filter_menu_view_path}.vue`)

...您正在创建一个 returns 承诺（组件）的函数。 Vue 将在需要组件时调用该函数并等待 promise 解析以使用 import

返回的组件

编辑

哦，是的，如果您尝试使用命名视图，则密钥是 components，而不是 component

使用 Promises 为命名视图导入动态 Vue 路由器

Dynamic VueRouter imports for named Views using Promisses

promise

vue.js

es6-promise

vue-router

编辑