为什么 Ionic 需要在 URL 中使用“/tab/”前缀？

Question

我想制作一个底部有导航栏的简单 Ionic 应用程序。经过大量研究，我开始工作了。但是，我不明白两件事：

#1。在我的 routes.js 文件中，选项卡状态在那里做什么，为什么我需要为我的家乡状态添加前缀？

// Why do I need the tabs. part in my state?
$stateProvider.state('tabs.home', {
    url: '/home',
    views: {
        "home-tab": {
            templateUrl: 'templates/home/index.html'
        }
    }
})
// Why do I even need this state?
.state('tabs', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
})

#2。每当我创建一个锚 link 或一个离子标签 link 时，我总是必须在散列前加上 /tab/ 前缀。为什么？

<!-- Why do I need the /tab/ part in the href? -->
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>

我承认：我还没有真正研究过 ionic 和 $stateProvider。如果有人可以将 link 添加到 ionic 或 $stateProvider 的教程中，我将不胜感激。

Answer 1

您需要一个抽象状态，因为您正在处理嵌套视图。（您有导航栏和主页视图）。

你使用/tab/home因为你要去tabs.home州。如果您有另一个带有选项卡和列表的状态，您将使用 /tab/list 访问它。您正在渲染两个模板，选项卡和索引。

读这个：

http://learn.ionicframework.com/formulas/navigation-and-routing-part-2/

具有更多观看次数的示例：

$stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.facts', {
      url: "/facts",
      views: {
        'home-tab': {
          templateUrl: "templates/facts.html"
        }
      }
    })
    .state('tabs.facts2', {
      url: "/facts2",
      views: {
        'home-tab': {
          templateUrl: "templates/facts2.html"
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "templates/about.html"
        }
      }
    })
    .state('tabs.navstack', {
      url: "/navstack",
      views: {
        'about-tab': {
          templateUrl: "templates/nav-stack.html"
        }
      }
    })
    .state('tabs.contact', {
      url: "/contact",
      views: {
        'contact-tab': {
          templateUrl: "templates/contact.html"
        }
      }
    });

和 link 到一个：

  <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
      <ion-nav-view name="about-tab"></ion-nav-view>
    </ion-tab>

http://codepen.io/ionic/pen/odqCz

为什么 Ionic 需要在 URL 中使用“/tab/”前缀？

Why does Ionic require a "/tab/" prefix in URLs?

angularjs

angular-ui-router

ionic-framework

ionic