I’m using vue-router for my job.
so, I think I will try using Framework7 next time.
I’m using vue-router until now.
But there is one thing to worry about.
Nested routes can’t be implemented?
for example, A or B roles for each user. so, I want to divide the nav-bar view by Arole’s user and Brole’s user.
In the case of vue-router, It’s can be implemented by https://router.vuejs.org/en/essentials/nested-routes.html.
In the case of framework7, How?
one more things.
I want to implecate nested nav-bar as a below.
But there is a margin between upper nav-bar and lower nav-bar.
How can I eliminate a margin?
that’s is my code.
app.vue▼
<template>
<div id="app">
<!-- Left Panel -->
<f7-panel left reveal theme-dark>
<f7-view url="/panel-left-2/"></f7-view>
</f7-panel>
<!-- Right Panel -->
<f7-panel right cover theme-dark>
<f7-view url="/panel-right-2/"></f7-view>
</f7-panel>
<!-- Main View -->
<f7-page>
<f7-navbar>
<f7-nav-left>
<f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="left"></f7-link>
</f7-nav-left>
<f7-nav-title>My App</f7-nav-title>
<f7-nav-right>
<f7-link icon-if-ios="f7:menu" icon-if-md="material:menu" panel-open="right"></f7-link>
</f7-nav-right>
</f7-navbar>
<f7-view id="main-view" url="/root"></f7-view>
</f7-page>
</div>
</template>
......
root.vue▼
<template>
<f7-page id="app">
<!-- Statusbar -->
<f7-statusbar></f7-statusbar>
<!-- Left Panel -->
<f7-panel left reveal theme-dark>
<f7-view url="/panel-left/"></f7-view>
</f7-panel>
<!-- Right Panel -->
<f7-panel right cover theme-dark>
<f7-view url="/panel-right/"></f7-view>
</f7-panel>
<!-- Main View -->
<f7-view id="main-view" url="/" main></f7-view>
</f7-page>
...........
</template>