[Framework7-Vue] Async Route strategy

Questions
1

Hello!

I’m using Async Route to fetch data before and pass it as props.

  {
    path: "/ore/projects/:projectId/",
    name: "project-detail",
    async: (to, from, resolve, reject) => {
      const { projectId } = to.params;
      // fetch data from backend
      api.findTasksByProjectId(projectId).then(result => {
        const { tasks } = result.data;
        // Async Lazy Components
        const ProjectDetail = () => import("../pages/ProjectDetail.vue");
        return ProjectDetail().then(c => {
          resolve({ component: c.default }, { props: { tasks } });
        });
      });
    }
  },

I’ve got doubts that this is not a good strategy becouse I’ve a wait moment in loading the page that give a bed feel to the user.

I didn’t find examples of Async Route that use async function (Promises) to pass data as props.

Is it the right way to use async route?

Thank you for your help.

PS: is Async Lazy Components implemented in the right approach? I’ve also some doubts about it :wink:

Ref:

2

I would better keep async component, but move loading data to the component itself, so you can quickly show page with e.g. preloader or some placeholder, and when data loaded it will be updated

2 Likes
3

Thank you @nolimits4web.
Very useful tips. :+1: