Main app as master detail

Questions
1

Hi! I’m using f7 version 6.

I have a main app component layout, but I need it as master/detail. How can I do it?

In app.js I can only specify “componentUrl”, but not “master” and “detailRoutes”. If I redefine my master route in routes.js it also not works…

Please, help! :sob: slight_smile:

@nolimits4web can you help me?

2

I solved this way:

  • remove “view-init” from view element (into html code of master component’s template) and others related data attributes

  • add this code into export section of master component:

      $f7ready(() => {
  	mainView = app.views.create('#view-main', {
  		// enable master detail
  		masterDetailBreakpoint: 768,
  		masterDetailResizable: true,
  		routes: [//(*)
  			...
  		]
  	]
  	});        
  });

  • into routes(*) of previous code I redeclared my master route with master/detail properties:

      {
  	path: '/desk',
  	componentUrl: 'desk/default/home',
  	// specify home route as master route
  	master(app, router) {
  		return app.device.desktop;
  	},
  	detailRoutes: [
  		...
  	]
  },
  ...

Now my app starts with master/detail layout! :slight_smile:
But now I have another problem: routes in my routes.js file not work anymore! I must move them in detail routes…

3

EDIT: it works on localhost but not online, yet I fixed url in browserHistoryRoot!
This error occours:
Uncaught (in promise) Error: RangeError: Maximum call stack size exceeded

4

I setted browserHistoryInitialMatch: true, now it works

1 Like