Question

我在这里问了一个类似的案例，但后来我发现这不是我想做的事情：

这是一个新版本：

HTML

  <body ng-app="plunker">
    <div>
      <a ui-sref="admin">Admin</a>
      <a ui-sref="user">User</a>
    </div>
    <div ui-view></div>  
  </body>

JS

var app = angular.module('plunker', ['ui.router']);

app.config(function ($stateProvider, $urlRouterProvider) {
  $urlRouterProvider
    .when('/', '/admin/dashboard')
    .when('/admin', '/admin/dashboard')
    .when('/user', '/user/dashboard')
    .otherwise('/admin/dashboard');

  $stateProvider
    .state('admin.dashboard', {
      url: '/admin/dashboard',
      resolve: {
        test: function() {
          console.log('called admin');
          return;
        }
      },
      template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
    })
    .state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK
      url: '/admin/link1',
      resolve: {
        test: function() {
          console.log('admin.link1 called resolve');
          return;
        }
      },
      template: '<div>admin link1</div>'
    })
    .state('user', {
      url: '/user/dashboard',
      template: '<div>user dashboard</div>'
    });
});

代码：http://plnkr.co/edit/NYdWC1j9xskQnY8LjJkZ?p=preview

要求

我不需要为父路线呈现任何内容（admin）
默认重定向为/admin/dashboard
我需要将网址正确地构建为/admin的孩子，因为之前的问题，它最终是/admin/dashboard/admin/link1
我确实需要admin和user个父母。需要儿童关系。这将在稍后使用。

问题

现在我无法显示像admin.dashboard这样的子路线。它只是空白。如何默认显示dashboard？
如果我添加以下行以显示admin模板，即使此ui-sref="admin.dashboard"也不会带我到正确的dashboard子路径

javascript .state('admin', { url: '/admin', template: '<div>admin. Go <a ui-sref="admin.dashboard">dashboard</a></div>' })

Answer 1

在嵌套路线时，您需要拥有父路线。在这种情况下，您错过了一个管理员＆＃39;路由。

.state('admin', {
    url: '/admin',
    abstract: true,
    template: '<div ui-view></div>'
})
.state('admin.dashboard', {
    url: '/dashboard',
    templateUrl: '/views/admin.dashboard.html'
})
.state('admin.profile', {
    url: '/profile',
    templateUrl: '/views/profile.html'
})

abstract: true属性告诉ui-router这实际上不是你可以导航到的路线
路由的嵌套由名称

.

路由然后是/admin/dashboard和/admin/profile

请参阅：https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#issue-my-templates-are-not-appearing--loading - 显示（re：缺少ui-view /空白视图问题）

Answer 2

有一个updated plunker。为简单起见，我首先将状态'admin.dashboard'的名称更改为：

.state('admin_dashboard', {
  url: '/admin/dashboard',
  ...

原因是，任何点在此处理为子状态。我们现在可以（但不必）引入 admin 的子语句，以解释如何正确调用state ...

这些是<a>

内调用的重要变化

不工作ui-sref（原创）

<div>
  <a ui-sref="admin">Admin</a>
  <a ui-sref="user">User</a>
</div>

工作 ui-sref

<div>
  <a ui-sref="admin_dashboard">Admin</a>
  <a ui-sref="user">User</a>
</div>

工作 href

<div>
  <a href="#/">Admin as <samp>'/'</samp></a>
  <a href="#/admin">Admin as <samp>'/Admin'</samp></a>
  <a href="#/user">User</a>
</div>

我们可以看到，ui-sref必须包含州名，而href可以（必须）包含网址，即使是when()内部定义的网址{1}}

检查更新后的example ...

更新：

如果我们想与父母一起去，我们可以拥有这样的设置

$stateProvider
     .state('admin', {
       url: '/admin',
       template: '<div>admin. Go <a ui-sref="admin.dashboard">dashboard</a>' + 
       '<div ui-view=""></div>' +
       '</div>'
     })
    .state('admin.dashboard', {
      url: '/dashboard',
      resolve: {
        test: function() {
          console.log('called admin');
          return;
        }
      },
      template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
    })
    .state('admin.link1', { 
      url: '/link1',
      resolve: {
        test: function() {
          console.log('admin.link1 called resolve');
          return;
        }
      },
      template: '<div>admin link1</div>'
    })
    .state('user', {
      url: '/user/dashboard',
      template: '<div>user dashboard</div>'
    });

这些将成为锚点

不工作ui-sref（原创）

<div>
  <a ui-sref="admin">Admin</a>
  <a ui-sref="user">User</a>
</div>

工作 ui-sref

<div>
  <a ui-sref="admin.dashboard">Admin</a>
  <a ui-sref="user">User</a>
</div>

工作 href

<div>
  <a href="#/">Admin as <samp>'/'</samp></a>
  <a href="#/admin">Admin as <samp>'/Admin'</samp></a>
  <a href="#/user">User</a>
</div>

更新后的plunker

将子路由设为默认路由

2 个答案: