Public and private url directory structure

Please, I am new to this, I do not know how SPA works. my issues is that I would like to have public and protected page url for those who log in and those who do not.
one of my public url is login page where when user is successfully login I will have to re-direct such user to dashboard that has different page design from that of public page design.
My issues are this:
1)Do I need to have different var app = new Framework7({}) and view initialization for both public and protected index page.
2)I would like to have different my-app css and js for both of them and I would also like to use componentUrl routes link to all my protected page as I will need to be fetching data to render on each page from server.
Thanks in advance as I am looking forward to your response.

In the docs, there’s a redirect function you can use. All you do is add the redirect to the rout for the page and then test for permissions. You can reroute or reject the request. If you reject the request the user stays on the current page. If you reroute you can take then anywhere you want (an error page).

Look here:

Thanks PPetree for your response. I have taken another dimension to solve the concern issue.