angular-ui-路由器嵌套视图使用直接 url 或刷新时页面未加载

Question

我有这个 plunker which works fine it's better seeing here 但那里有一个错误，当通过可点击的 link 导航到嵌套状态时，我得到了想要的行为，但是当刷新页面或写入 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 and I sow this SO 中看到的 html5 模式，但那里没有答案。
关于如何解决此问题的任何帮助，在此先感谢。

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"
});

希望这能帮助其他人不要在这么简单的错误上浪费时间。

angular-ui-路由器嵌套视图使用直接 url 或刷新时页面未加载

angular-ui-router nested views the page doesn't loading when direct url is used or refresh

javascript

angularjs

angular-ui-router