Master-Detail layout crashing after reloading

Hi, I am using the Master-Detail layout and I have an issue with routing after reloading page.

I have routes structure like below and when i go deeper to on of detail route – /timetable/ which contains tabs structure and then reload page (imitation of second user’s enter) a have an issue like on gif (master page is missing).

I was trying to turn off pushState and it works but then my routing from outside (navigation by link or QR etc.) is crashing because browser stops to recognize url.

So i need an advice for routes stricture or any
Thanks

f7 v5.7.14
vue 2.6.11

Routes like this:

export default [
  {
    path: "/",
    component: MainPage,
    master: true,
    detailRoutes: [
      {
        path: "/timetable/",
        component: TimetablePage,
        routes: [
          {
            path: "/event/:scheduleId/:eventId/:itemId/",
            component: EventPage,
            tabs: [
              {
                path: "/",
                id: "tab-questions",
                component: QuestionsPage,
              },
              {
                path: "/questions/",
                id: "tab-questions",
                component: QuestionsPage,
              },
              {
                path: "/info/",
                id: "tab-info",
                component: EventInfoPage,
              },
              {
                path: "/polls/",
                id: "tab-polls",
                component: PollsPage,
              },
              {
                path: "/materials/",
                id: "tab-materials",
                component: MaterialsPage,
              }
            ],
            routes: [
              {
                path: "/questions/:questionId/",
                component: QuestionPage
              },
              {
                path: "/polls/:pollId/",
                component: PollPage
              },
              {
                path: "/slidepresentation/",
                component: SlidePresentationPage,
                routes: [
                  {
                    path: "/:questionId/comments/",
                    popup: {
                      component: CommentsPage
                    }
                  },
                ]
              },
            ],
          },
        ]
      },
      {
        path: "/info/",
        component: InfoPage,
      },
      {
        path: "/notifications/",
        component: NotificationPage
      },
      {
        path: "/profile/",
        component: ProfilePage
      }
    ]
  },
  ...commonHighRoutes,
  {
    path: "(.*)",
    component: NotFoundPage
  }
];

Example gif:

1 Like

@nolimits4web need your advice please

Try to “unnest” nested routes (routes.routes), and them all as direct child routes of detailRoutes

I done that and got this error with tabs

And what is your routes array now? Just for the case - “tab routes” should still be under the tabs routes

Now it looks like that, added first root tab on “/” and still doesn’t work

export default [
      {
    path: "/",
    component: MainPage,
    master: true,
    detailRoutes: [
      {
        path: "/timetable/",
        component: TimetablePage,
      },
      {
        path: "/event/:scheduleId/:eventId/:itemId/",
        component: EventPage,
        tabs: [
          {
            path: "/",
            id: "tab-questions",
            component: QuestionsPage,
          },
          {
            path: "/questions/",
            id: "tab-questions",
            component: QuestionsPage,
          },
          {
            path: "/info/",
            id: "tab-info",
            component: EventInfoPage,
          },
          {
            path: "/polls/",
            id: "tab-polls",
            component: PollsPage,
          },
          {
            path: "/materials/",
            id: "tab-materials",
            component: MaterialsPage,
          }
        ],
        routes: [
          {
            path: "/questions/:questionId/",
            component: QuestionPage
          },
          {
            path: "/polls/:pollId/",
            component: PollPage
          },
          {
            path: "/slidepresentation/",
            component: SlidePresentationPage,
            routes: [
              {
                path: "/:questionId/comments/",
                popup: {
                  component: CommentsPage
                }
              },
            ]
          },
        ],
      },
      {
        path: "/info/",
        component: InfoPage,
      },
      {
        path: "/notifications/",
        component: NotificationPage
      },
      {
        path: "/profile/",
        component: ProfilePage
      }
    ]
      },
      ...commonHighRoutes,
      {
    path: "(.*)",
    component: NotFoundPage
      }
    ];

And this is tabs declaration

 <f7-tabs routable>
      <f7-tab
        id="tab-info"
        :class="!isDesktop && 'hide-navbar-on-scroll'"
        @tab:show="
          $f7.navbar.show('#eventTabsNavbar');
          $f7.navbar.expandLargeTitle('#eventTabsNavbar');
          showTutorial('info');
        "
        @tab:hide="
          clearTutorialTimeout();
        "
      />
      <f7-tab
        id="tab-questions"
        :class="!isDesktop && 'hide-navbar-on-scroll'"
        @tab:show="
          $f7.navbar.show('#eventTabsNavbar');
          $f7.navbar.expandLargeTitle('#eventTabsNavbar');
          updateHistoryOfReading('tab-questions');
          showTutorial('questions');
        "
        @tab:hide="
          clearTutorialTimeout();
        "
      />
      <f7-tab
        id="tab-polls"
        :class="!isDesktop && 'hide-navbar-on-scroll'"
        @tab:show="
          $f7.navbar.show('#eventTabsNavbar');
          $f7.navbar.expandLargeTitle('#eventTabsNavbar');
          updateHistoryOfReading('tab-polls');
          showTutorial('polls');
        "
        @tab:hide="
          clearTutorialTimeout();
        "
      />
      <f7-tab
        id="tab-materials"
        :class="!isDesktop && 'hide-navbar-on-scroll'"
        @tab:show="
          $f7.navbar.show('#eventTabsNavbar');
          $f7.navbar.expandLargeTitle('#eventTabsNavbar');
          updateHistoryOfReading('tab-materials');
          showTutorial('materials');
        "
        @tab:hide="
          clearTutorialTimeout();
        "
      />
    </f7-tabs>

I still can see you have a lot of nested routes. Check this example, it doesn’t have any errors tender-mcclintock-s084o - CodeSandbox

I modified your sandbox and got the same error with missing master page
scenario:

  1. navigate to detail / any tab;
  2. reload page.

https://codesandbox.io/s/boring-dewdney-gi7um?file=/src/pages/Detail.vue


And also modified my routes to one-level in detailRoutes as you advised and got next error with f7RrouterTabLoaded of undefined

Routes
{
    path: "/",
    component: MainPage,
    master: true,
    detailRoutes: [
      {
        path: "/timetable/",
        component: TimetablePage,
      },
      {
        path: "/event/:scheduleId/:eventId/:itemId/",
        component: EventPage,
        tabs: [
          {
            path: "/",
            id: "tab-questions",
            component: QuestionsPage,
          },
          {
            path: "/info/",
            id: "tab-info",
            component: EventInfoPage,
          },
          {
            path: "/polls/",
            id: "tab-polls",
            component: PollsPage,
          },
          {
            path: "/materials/",
            id: "tab-materials",
            component: MaterialsPage,
          }
        ],
      },
      {
        path: "/event/:scheduleId/:eventId/:itemId/questions/:questionId/",
        component: QuestionPage
      },
      {
        path: "/event/:scheduleId/:eventId/:itemId/polls/:pollId/",
        component: PollPage
      },
      {
        path: "/event/:scheduleId/:eventId/:itemId/slidepresentation/",
        component: SlidePresentationPage,
      },
      {
        path: "/event/:scheduleId/:eventId/:itemId/:questionId/comments/",
        popup: {
          component: CommentsPage
        }
      },
      {
        path: "/info/",
        component: InfoPage,
      },
      {
        path: "/notifications/",
        component: NotificationPage
      },
      {
        path: "/profile/",
        component: ProfilePage
      }
    ]
  },
  ...commonHighRoutes,
  {
    path: "(.*)",
    component: NotFoundPage
  }
];

I still can’t see any errors in console in your sandbox :slight_smile: Maybe you can create a minimal local project (or if you already have) and just send me the zip so I can check locally?

I will make zip but check gif first, is it expected behaviour?
ezgif.com-gif-maker (1)

this will be fixed in next update fix(router): don't set initial page component if it is master's detai… · framework7io/framework7@9e4e264 · GitHub

Is it possible to make those fixes in f7 of version 5 or how can i fix it without modifying core of library?

Because our project is big and old and also we use f7 v5.7.14 and vue 2.6.11 so migration will take a very long time (it’s in backlog)

p.s. problem with tabs still alive and i will continue to work on them

No, Vue version in v5 works in a totally different way, and I guess there shouldn’t be such issue. v6 in general has a lot of fixes/tweaks for a master-detail logic