Framework7路由tabs踩坑记

最近刚刚下定决心把孟郎诗词网做成一个web版本的app，于是就去找相应的前端框架，然后发现了这个框架，文档是纯英文的，其实最想用的还是它的带路由的tab，官方给的案例以及解答

Routable Tabs（官方）

What routable tabs means and why is it good?

• First of all, it provides opportunity to navigate to tabs by usual links instead of so called special tab-links.
• Second, when navigating to such route you can load a page with required tab opened.
• Third, with enabled Push State, the same tab will be opened when you navigate back and forward in history.
• And the last but not least, when using routable tabs you can load tabs content in the same ways as for pages, i.e. using url, content, template, templateUrl, component or componentUrl

First of all we need to specify tabs routes in app routes. Lets assume we have a page with routable tabs on /tabs/ route:

routes = [
  {
    path: '/about-me/',
    url: './pages/about-me/index.html',
    // Pass "tabs" property to route
    tabs: [
      // First (default) tab has the same url as the page itself
      {
        path: '/',
        id: 'about',
        // Fill this tab content from content string
        content: `
          <div class="block">
            <h3>About Me</h3>
            <p>...</p>
          </div>
        `
      },
      // Second tab
      {
        path: '/contacts/',
        id: 'contacts',
        // Fill this tab content via Ajax request
        url: './pages/about-me/contacts.html',
      },
      // Third tab
      {
        path: '/cv/',
        id: 'cv',
        // Load this tab content as a component via Ajax request
        componentUrl: './pages/about-me/cv.html',
      },
    ],
  }
]

On the /about-me/ page we may have the following structure for example:

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">About Me</div>
    </div>
  </div>
  <div class="toolbar tabbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="./" class="tab-link" data-route-tab-id="about">About</a>
      <a href="./contacts/" class="tab-link" data-route-tab-id="contacts">>Contacts</a>
      <a href="./cv/" class="tab-link" data-route-tab-id="cv">>CV</a>
    </div>
  </div>
  <div class="tabs tabs-routable">
    <div class="tab page-content" id="about"></div>
    <div class="tab page-content" id="contacts"></div>
    <div class="tab page-content" id="cv"></div>
  </div>
</div>

Almost the same as with usual Tabs but with the difference that there is no more tab-link-active and tab-active classes on tab links and tabs. These classes and tabs will be switched by router. And there is a new data-route-tab-id attribute, it is required for tabs switcher to understand which link related to the selected route.

You can learn more about Routable Tabs and their additional events in appropriate sections of Tabs component page.

个人理解

1.为了要使用带路由的tabs，你必须单独为tabs配置路由。

注意：tabs在那个页面里面，你就在这个页面配置路由的地方加一个专门为tabs配置路由，例如（在index.html中配置）：

{
    /*为index.html配置路由*/
    path: '/',
    url: './index.html',
    id: 'home',
    /*专门为带路由的tabs配置路由*/
    tabs: [
      {
        path: '/',
        id: 'tab1',
        url: './pages/test.html'
      },
      {
        path: '/tab2/',
        id: 'tab2',
       url: './pages/about.html'
      },
      {
        path: '/tab3/',
        id: 'tab3',
        url: './pages/settings.html'
      },
    ],
  },

然后就是用tabs要跟他绑定

注意，index.html中的view一定这样写：

<div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/">

其中view-init是为了初始化视图，safe-areas，data-master-...去掉没有影响，data-url的属性是view要加载的页面所对应的路由

完整写法：

<div id="app">
    <div class="statusbar"></div>

    <div class="view view-main view-init safe-areas" data-master-detail-breakpoint="800" data-url="/">
        <div class="page">
            <div class="toolbar toolbar-bottom tabbar">
                <div class="toolbar-inner">
                    <a href="/" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
                    <a href="/tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
                    <a href="/tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
                </div>
            </div>
            <div class="tabs tabs-routable">
                <div class="page-content tab" id="tab1"></div>
                <div class="page-content tab" id="tab2"></div>
                <div class="page-content tab" id="tab3"></div>
            </div>
        </div>
    </div>
</div>

2.如何引入路由的js文件，并使其生效

路由可单独写一个文件：

var routes = [
  // Index page
  {
    path: '/',
    url: './index.html',
    name: 'home',
  },
  // About page
  {
    path: '/about/',
    url: './pages/about.html',
    name: 'about',
  },
]

然后通过js引入

<script src="js/routes.js"></script>

然后初始化Framework7的时候：

var app = new Framework7({
  id: 'io.framework7.testapp',
  root: '#app',
  theme: theme,
 //引入路由
  routes: routes,
});

3.被引入的页面可以可以是一个完整的HTML文件，也可以是Framework7的Page，如：

<div class="page">
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="left">
                <a href="#" class="link back">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Framework7</span>
                </a>
            </div>
            <div class="title">About</div>
            <div class="title-large">
                <div class="title-large-text">About</div>
            </div>
        </div>
    </div>
    <div class="page-content">
        <div class="block-title">Welcome to Framework7</div>
        <div class="block block-strong">
           ......内容
        </div>
    </div>
</div>