Open myl0204 opened 6 years ago
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.
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
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.
Hi, i am new comer in vue and i have trouble reading the docs
following sentence are copied from the doc
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
I am very confused.