On the problem that the data loading time is too long after the route jump

vue project, when doing router.push ({path: "dic"}) , the dic page needs to load more data in mounted, which takes a long time. When performing a route jump, it gives the impression that you load the data first (stay on the original page for a second or two) and then jump to the dic page, but normally you should go to the dic page first and then load the data. A little confused

Nov.30,2021

ide/advanced/data-fetching.html-sharp%E5%AF%BC%E8%88%AA%E5%AE%8C%E6%88%90%E5%90%8E%E8%8E%B7%E5%8F%96%E6%95%B0%E6%8D%AE" rel=" nofollow noreferrer "> https://router.vuejs.org/zh/g.


Open it first Take a look at the performance tracking performance


this is true. The method has been loaded first, but the route has not been executed yet. You can try this:
encapsulate the complex data load into a component, and then introduce it asynchronously into the component. The route will be loaded first (the page jumps first), and then the data will be loaded asynchronously. Here is the introduction of

for the asynchronous component.
components: {
        'data': () => import('../../components/public/data.vue')
      },
Menu