首页 > ionic的side menu和tabs结合的路由怎么设置?

ionic的side menu和tabs结合的路由怎么设置?

我是用ionic的tab默认模板,然后需要加side menu这个功能,但是我在设置路由的时候不知该如何设置,是应该在tab下面接着这样写?

  .state('tab.login',{
    url:'/login',
    views:{
      'tab-login':{
        templateUrl:'templates/login.html',
        controller:'LoginCtrl'
      }
    }
  })

但是每次这样都会跳转到首页面,而只有title显示出来,内容区域号线被首页的盖住了,因此我新建了一个模板,为menu.html,我这样定义了路由

  .state('menu',{
    url:'/menu',
    abstract:true,
    templateUrl: 'templates/menu.html'
  })
  .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })
  .state('menu.login',{
    url:'/login',
    views:{
      'menu-login':{
        templateUrl:'templates/login.html',
        controller:'LoginCtrl'
      }
    }
  })

但是却没有了切换动画效果,这是什么原因?


加个嵌套子路由应该就行了。

  .state('tab.dash', {
    url: '/dash',
    abstract:true,//设为抽象
    views: {
      'tab-dash': {
        templateUrl: 'templates/menu.html',
        controller: 'MenuCtrl'
      }
    }
  })
  .state('tab.dash.firstPage', {
    url: '/firstPage',
    views: {
      'side-menu': {
        templateUrl: 'templates/firstPage.html',
        controller: 'MyCtrl'
      }
    }
  })
$urlRouterProvider.otherwise('/tab/dash/firstPage');//跳转到首页

menu.html里的内容就是原来的side menu项目里menu.html模板,然后把视图名menuContent改成side-menu就行了。

【热门文章】
【热门文章】