Now let's look on more complex situation.
So we have two initialized Views (Left view and Right view) with separated navigation. In this case all links in Left view will load pages in Left view, and all links in Right view will load pages in Right view.
But now we need that some of links in Left view load pages in Right view. It is called linking between views. We already know how to do that with JavaScript - using .router.load() and .router.back() View methods.
Framework7 allows to achieve this without JavaScript, all we need in this case is to add data-view attribute to link. This data-view attribute should contain CSS selector of required View:
<body>
...
<!-- Views -->
<div class="views">
<!-- Left view -->
<div class="view view-main left-view">
<!-- Pages -->
<!-- These links will load pages to this Left view -->
<a href="about.html"> About </a>
<a href="services.html"> Services </a>
<!-- This link will load pages to Right view -->
<a href="products.html" data-view=".right-view"> Products </a>
</div>
<!-- Right view -->
<div class="view right-view">
<!-- Pages -->
<!-- These links will load pages to this Right view -->
<a href="products.html"> Products </a>
<a href="contacts.html"> Contacts </a>
<!-- This link will load pages to Left view -->
<a href="about.html" data-view=".left-view"> About </a>
<a href="services.html" data-view=".left-view"> Services </a>
<!-- This link will trigger Go Back in Left view -->
<a href="#" class="back" data-view=".left-view"> About </a>
</div>
</div>
...
</body>That was easy, right? So just add data-view attribute with CSS selector of another View to any link, or even "back" link, to make linking between Views.
As an real example you can look at "Split View Application" example when links from bottom of Left view control Main view.
Now when we know everything about main App structure and linking/loading pages, we need to fill our App with components. Let's start from one of the most important - Navbars & Toolbars