question of advanced async components and vue-router

[myl0204]

Hi, i am new comer in vue and i have trouble reading the docs

following sentence are copied from the doc

Note that when used as a route component in vue-router, these properties will be ignored because async components are resolved upfront before the route navigation happens. You also need to use vue-router 2.4.0+ if you wish to use the above syntax for route components.

I wonder what it truly means?

if these properties will be ignored, why i use it for route components?

Also, i noticed that relative docs are updated 2 days ago

Note that you must use Vue Router 2.4.0+ if you wish to use the above syntax for route components.

I am very confused.

[chrisvfritz]

Thanks for reporting this! After some investigation, it actually looks like the syntax is only partially supported by Vue Router. The async component will load and be used, but the rest of the advanced options have no effect. You can use this strategy to work around the issue in the meantime, but I think the final solution will be to add more detail to Vue Router's doc on advanced async components, then update this page with a link to those details.

[Mighty683]

Thanks for reporting this! After some investigation, it actually looks like the syntax is only partially supported by Vue Router. The async component will load and be used, but the rest of the advanced options have no effect. You can use this strategy to work around the issue in the meantime, but I think the final solution will be to add more detail to Vue Router's doc on advanced async components, then update this page with a link to those details.

This solution cause to disable any navigation guards like beforeRouteEnter in loaded component

[Glandos]

I have another solution. This requires Pinia, or at least something global:

const hookLoad = (loader: () => Promise<typeof import('*.vue')>) => {
  return async () => {
    console.log('Before loading')
    // This is a Pinia store
    useApplication().loadingComponent = true
    const component = await loader()
    console.log('After')
    useApplication().loadingComponent = false
    return component
  }
}

const routes = [
  {
    path: '/conf',
    component: hookLoad(() => import(/* webpackChunkName: "conf" */ '../views/Configuration.vue')),
    meta: {
      auth: true
    }
  }
]

Everything is working: navigation guards and webpack chunk splitting.

Of course, the "magic" relies in useApplication().loadingComponent = true, which is a Pinia store. Then, anywhere in your application, use that state to do… whatever you like. Show a loader, a modal dialog, etc.