Navigating to detail page not fires master page's load

Questions
1

Hi!
I’m developing a small app with framework7 latest version (v.6)

I have this routes in routes.js file:

	var routes = [
		{
			name: 'home',
			path: '/desk',
			async({ app, router, to, from, resolve, reject }) {
				if(userIsGuest != 1)
					resolve({componentUrl: 'desk/default/home'});
				else
					resolve({componentUrl: 'desk/default/login'});
			},
			master(app, router) {
				return app.device.desktop;
			},
			detailRoutes: [
				...
				{
					name: 'ticketDetail',
					path: '/desk/ticket/:ticketId',
					componentUrl: '/desk/ticket/view?id={{ticketId}}',
					options: {
						animate: false,
					},
				},
			],
		},
	];

If, after login, I navigate to “ticketDetail” route with:

$f7router.navigate( { name: 'ticketDetail', params: { ticketId: 180 } } );

master page (home) is not loaded!

Instead if I reload page (http://dev.italpaghe/desk#!/desk/ticket/180) it works fine. Why?

2

And if you disable browserHistory/pushState it works?

3

No, it not works… :frowning:

4

Also seems like you are using F7 project not in the root (is it in the /desk subfolder?). In this case change routes to / as root, and set correctly browserHistoryRoot in view settings

5

No, “desk” is a sub-module of main site (friendly url), so the /desk path is the root of the F7 project. However I will make a try

6

No way, it not works… I changed main route to “/” path and I setted “/desk as `browserHistoryRoot”, it loads only detail view, in full page mode

7

Would be really helpful if you can setup simple project where issue can be reproducible using template from this topic How to ask a good question on forum

1 Like
8

Hi!

I restarted my project from your core template at codesandbox.io. I discovered that this problem occours when home and login are in same route rule with async function (as above), instead if I split them it works, in this way:

{
  name: "login",
  path: "/login",
  componentUrl: './pages/login.html',
},
{
  name: "home",
  path: "/",
  componentUrl: './pages/home.html',      
  master(app, router) {
    return true;
  },
  detailRoutes: [
    {
      name: "ticketDetail",
      path: "/pages/ticket/:ticketId",
      componentUrl: "./pages/ticket.html",
      options: {
        animate: false,
      },
    },
  ],
},
1 Like