Question

我正在尝试创建一个非常简单的lookbook应用程序。然而，我似乎无法让这些路线起作用。我尝试了this question的答案来调试路由。控制台中没有任何内容。

我正在尝试创建一个应用程序，用户可以在页面上看到多个外观，然后可以导航到相应的详细信息页面。如果Ionic还认识到详细信息页面是lookbook页面的子页面，那将是很好的。这样就显示了菜单栏中的后退按钮。

app.config路线设置代码：

$stateProvider

  //Lookbook view
  .state('lookbook', {
    url: '/lookbook',
    views: {
      'main': {
        templateUrl: 'templates/lookbook.html',
        controller: function () {
          console.log('Lookbook controller loaded!');
        }
      }
    }
  })

  // Details view
  .state('lookbook.brand-shirt', {
    url: '/lookbook/brand-shirt',
    views: {
      'main': {
        templateUrl: 'templates/brand/shirt.html',
        controller: function () {
          console.log('Details controller loaded!');
        }
      }
    }
  });

$urlRouterProvider.otherwise('/lookbook');

index.html <body>内容：

  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>

    <ion-nav-title>
      <img class="logo" alt="Lookbook Logo" ng-src="assets/images/icons/logo.svg">
    </ion-nav-title>
  </ion-nav-bar>

  <ion-nav-view name="main">
  </ion-nav-view>

显示lookbook页面。但是当我导航到/lookbook/brand-shirt时，它会恢复为/lookbook。我错过了什么？

Answer 1

在该路由中，brand-shirt状态是lookbook状态（lookbook.brand-shirt）的子级，因为您不想在lookbook视图中加载详细信息，您不需要需要这样做。

 $stateProvider

  //Lookbook view
    .state('lookbook', {
    url: '/lookbook',
    views: {
      'main': {
        templateUrl: 'templates/lookbook.html',
        controller: function() {
          console.log('Lookbook controller loaded!');
        }
      }
    }
  })

  // Details view
  .state('brand-shirt', {
    url: '/lookbook/brand-shirt',
    views: {
      'main': {
        templateUrl: 'templates/brand/shirt.html',
        controller: function() {
          console.log('Details controller loaded!');
        }
      }
    }
  });

  $urlRouterProvider.otherwise('/lookbook');

这样做。历史记录也是如此，因为您正在'main' ion-nav-view推送观看次数。因此，在您的应用开始时/lookbook已加载到main，当您转到brand-shirt时，新视图会在main视图堆栈中显示。如果您返回，则会删除详细信息视图并返回lookbook。

CodePen

离子UI路由器不适用于子视图

1 个答案: