Question

我正在创建一个离子应用程序，但我遇到了路由问题。目前，我有一个带侧边菜单的应用视图，在主页上，我有两个标签Tab 1和Tab 2，它们具有不同的用户界面视图tab1.html＆amp; tab2.html

在home.html

中标记代码

    <ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light hp" tabs-style="tabs-icon-top" tabs-type="tabs-positive" style="top: 60px !important;" animation="slide-left-right">
      <!-- Dashboard Tab -->
      <ion-tab title="Tab 1" href="#/home/tab1">
        <ion-nav-view name="tab1-content"></ion-nav-view>
      </ion-tab>

      <!-- Chats Tab -->
      <ion-tab title="Tab 2" href="#/home/tab2">
        <ion-nav-view name="tab2-content"></ion-nav-view>
      </ion-tab>
    </ion-tabs>

tab1.html和tab2.html代码：

    <ion-view view-title="Tab 1">
        <ion-content overflow-scroll="true" padding="false" class="has-header">
            Tab 1 Content
        </ion-content>
    </ion-view>

    <ion-view view-title="Tab 2">
        <ion-content overflow-scroll="true" padding="false" class="has-header">
            Tab 2 Content
        </ion-content>
    </ion-view>

'routing.js'中的路由代码

    .state('menu.home', {
        url: '/page21',
        views: {
          'side-menu21': {
            templateUrl: 'templates/home.html',
            controller: 'homeCtrl'
          }
        }
    })

    .state('menu', {
        url: '/side-menu21',
        templateUrl: 'templates/menu.html',
        abstract:true
      })

    .state('menu.about', {
        url: '/page10',
        views: {
          'side-menu21': {
            templateUrl: 'templates/about.html',
            controller: 'settingsCtrl'
          }
        }
    })
    ... and so on

问题：

当我从菜单或登录页面（单独的）导航Home时，我没有看到标签的内容。任何人都可以帮我解决什么问题吗？

页面网址似乎如下： http://localhost/testapp/#/side-menu21/page21

我们将非常感谢您对此问题的帮助。

谢谢！

Answer 1

我认为您应该在主页标签状态中添加 abstract 属性：

.state('menu.home', {
    url: '/page21',
    abstract: true,
    views: {
      'side-menu21': {
        templateUrl: 'templates/home.html',
        controller: 'homeCtrl'
      }
    }
})

Answer 2

你需要2个抽象状态，一个用于侧边菜单，一个用于Tabs本身，如果你可以创建一个plunkr / codepen，你可以帮助你。

离子框架路由问题

2 个答案: