angular-ui-router 嵌套视图在使用直接 url 或刷新时页面不加载

Question

我有这个plunker，它工作得很好，最好看到here，但是那里有一个错误，当通过可点击链接导航到嵌套状态时，我得到了所需的行为，但是当刷新页面或编写 URL 和按下进入页面，该页面在某些状态下不会加载。 我有 4 个州：

• profile.about
• profile.feed
• profile.user.about
• profile.user.feed

对于前 2 个刷新页面或选择 URL 并按 enter 将加载配置文件视图，但不会加载关于视图，第二个 2 工作正常。 路由器配置是这样的：

$urlRouterProvider.otherwise("/home");
// route 1
$stateProvider.state('home' , {
  url: "/home",
  templateUrl: "home.html"
});
// route 2
$stateProvider.state('profile' , {
  controllerAs: "Profile",
  url:          "/profile",
  templateUrl:  "profile.html",
  controller:   "ProfileController"
});
// user route
$stateProvider.state('profile.user' , {
  controllerAs: "Profile",
  url:          "^/:username",
  controller:   "ProfileController",
  template:     "<div ui-view></div>",
  resolve: {
    username: ['$stateParams', function ($stateParams) {
      return $stateParams.username;
    }]
  }
});
// route 3
$stateProvider.state('settings' , {
  url: "/settings",
  templateUrl: "settings.html"
});
// user about route
$stateProvider.state('profile.about', {
  controllerAs: "About",
  url:          "^/about",
  templateUrl:  "about.html",
  controller:   "AboutController2"
});
// user about route
$stateProvider.state('profile.user.about', {
  controllerAs: "About",
  url:          "/about",
  templateUrl:  "about.html",
  controller:   "AboutController"
});
// user about route
$stateProvider.state('profile.user.feed', {
  controllerAs: "Feed",
  url:          "/feed",
  templateUrl:  "feed.html",
  controller:   "AboutController"
});
$stateProvider.state('profile.feed', {
  controllerAs: "Feed",
  url:          "^/feed",
  templateUrl:  "feed.html",
  controller:   "AboutController2"
});

我不在plunker 中看到的 html5 模式，我播种了这个SO，但那里没有答案。
任何有关如何解决此问题的帮助，在此先感谢。

Answer 1

我在发布问题几秒钟后发现的问题是路由定义的顺序不正确。
状态 profile.user 有一个动态 url 参数，因此在 profile.user 之后定义 profile.feed 或 profile.about 将导致此错误，因此定义 profile.about 和 profile.feed 应该像这样在 profile.user 之前：

$urlRouterProvider.otherwise("/home");
// route 1
$stateProvider.state('home' , {
  url: "/home",
  templateUrl: "home.html"
});
// route 2
$stateProvider.state('profile' , {
  controllerAs: "Profile",
  url:          "/profile",
  templateUrl:  "profile.html",
  controller:   "ProfileController"
});
// route 3
$stateProvider.state('settings' , {
  url: "/settings",
  templateUrl: "settings.html"
});
// user about route
$stateProvider.state('profile.about', {
  controllerAs: "About",
  url:          "^/about",
  templateUrl:  "about.html",
  controller:   "AboutController2"
});
$stateProvider.state('profile.feed', {
  controllerAs: "Feed",
  url:          "^/feed",
  templateUrl:  "feed.html",
  controller:   "AboutController2"
});
// user route
$stateProvider.state('profile.user' , {
  controllerAs: "Profile",
  url:          "^/:username",
  controller:   "ProfileController",
  template:     "<div ui-view></div>",
  resolve: {
    username: ['$stateParams', function ($stateParams) {
      return $stateParams.username;
    }]
  }
});
// user about route
$stateProvider.state('profile.user.about', {
  controllerAs: "About",
  url:          "/about",
  templateUrl:  "about.html",
  controller:   "AboutController"
});
// user about route
$stateProvider.state('profile.user.feed', {
  controllerAs: "Feed",
  url:          "/feed",
  templateUrl:  "feed.html",
  controller:   "AboutController"
});

希望这可以帮助其他人不要在这样一个简单的错误上浪费时间。