Dynamic VueRouter imports for named Views using Promisses

Question

I'm trying to dynamically load my components views for Vue-Router. The import statement used is a promise, but it is always returning a promise instead of the actual value as the returned value even when i chain ".then" just incase the promise returns another promise. What i'm I doing wrong please?

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

Basically, I'm try to achieve this https://router.vuejs.org/guide/essentials/named-views.html but lazy load the views using import. Thank You

Answer 1

It's because then also returns promise.

You code looks strange so its hard to tell what you are trying to do but generally when using dynamic imports Vue expects a function returning promise

So change

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

for

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

...you are creating a function which returns a promise (of component). Vue will call the function when component is needed and wait for promise to resolve to use the component returned by import

Edit

Oh yeah, and if your are trying to use named views, the key is components, not component