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

Question

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

＃1。在我的routes.js文件中，那里的标签状态是什么，为什么我需要在我的home状态前缀？

// 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。每当我创建一个锚点链接或离子选项卡链接时，我总是必须在/ 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> 

我承认：我还没有真正研究了对离子也不$ stateProvider。如果任何人都可以链接到离子或$ 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" 
     } 
     } 
    }); 

和链接到一个：

<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