The lifecycle function that enters the page for the first time is executed twice.
wwRandom opened this issue · 5 comments
When jumping from one page (without a layout file) to another page (with a layout file), the lifecycle function that enters the page for the first time is executed twice.
Can you provide a reproduction to confirm and fix it?
you can see this demo
https://github.com/wenguangyang/vue-router-layout-bug
This is because of what vue-router-layout works. If the destination page component is an async component, it needs to wait loading to read layout option in the component options. So the steps will be like the below:
(When moving from page A (with layout X) to page B (with layout Y))
- Unmount page A, keep layout X since we don't know the page B's layout yet.
- Mount page B and wait loading it (Vue does it for us)
- After loading page B, we know B uses layout Y.
- Unmount layout X and mount layout Y. On the same time, page B will be unmounted and re-mount a new instance of it because Vue cannot detect the old page B and new one is the exact same VNode.
@wenGuangYang Does this behavior provides any real problem on your project, by the way?
@ktsn Yes! When we request data in the created method, it will be more than once. At the same time, when we write the method in the layout file, the first execution will report an error. Nuxt layout does not have this problem！
This has been fixed on v0.1.5. Thank you for reporting this!