Random page loading into a view

I’ve had this happen on a few occasions where i have a random page load into a view (which has an id that is not main). I can’t repeat in a jsfiddle. Any recommendations on how to debug?

The page getting loaded is the previous route in the routes array if that helps. Hard reload on the page does not help.

OK, found a fiddle:


Loads the sample form page first. Click on the red button i added at the top. It will bring you to the main page which I added a sidebar view. The form view loaded in there, even though it has its own content.

Also, if you have the main page be the first page, then different content loads in the other view.

I get the same issue when trying to use master/detail. All the links that have view=".view-main" load in detail and not the main view. Same thing when I try using a right panel.

OK, JSFiddle does weird things. This one should work: https://jsfiddle.net/d15qnL3w/2/

Well, i see few issues:

  1. You have 2 “main” views
  2. Nested Views are not supported (View in View)

This is what is working: https://jsfiddle.net/280p645y/

But what are you trying to achieve? I don’t get.

Yes, when Master route is loaded, all next routes will be loaded as Detail routes. To reload master we need to use reloadAll navigation parameter. Check the “red” section here https://framework7.io/docs/view.html#master-detail

I have tried a few things.

Can you PM me with the screenshots or designs or mockup how it should look like? On phone and tablet, and I will figure out

For anyone following along, I tried a few things that didn’t work:

  1. putting route:{reloadAll:true} in the params when initializing F7
  2. putting reloadAll in all the routes

But really, reloadAll needs to be put in Link or ListItem or whatever you are using to navigate.

For example:

<ListItem link="/overview/" view=".view-main" panelClose reloadAll>

view is not enough, you also need reloadAll.

I’ll get a picture to you, though I feel like I am getting close.

Great :+1:

This can be put in route definition like:

  path: '/foo/',
  component: ...
  options: { reloadAll: true },