让我们看一种更复杂一点的情况
我们有两个已经初始化完成的View（left view 和 right view)。这种情况下，所有在left view 中的链接加载的页面都会放在 left view 中，所有在right view中的链接加载的页面都会放在 right view中。
但是我们现在需要一些在 left view 中的链接加载的页面放进 right view中。这叫 View间链接。我们已经知道可以通过JS来实现，通过 .router.load() 和 .router.back()方法。
Framework7 可以让我们不使用JS来实现，所有需要做的只是在连接上增加一个 data-view 属性，这个属性包含一个CSS选择器指向需要放入的那个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>
我们已经有了完整的页面结构，下一步就是使用组件。首先从最重要的组件开始，导航栏和工具栏