使用ocLazyLoad与ui-router刷新页面后状态跳转至默认态的解决咨询

首先咱们得搞清楚为啥刷新users.list状态会跳转到默认页：页面刷新后，Angular应用会重新初始化。你原来的代码里是在run块里预加载users模块，但这个加载是异步的——ui-router会先尝试解析当前URL对应的状态，这时候users模块里的users.list状态还没来得及注册，ui-router找不到这个状态，就触发了otherwise规则跳转到首页了。

接下来给你调整代码，解决这个问题：

1. 修改主应用代码（app.js） #

咱们把懒加载的时机和路由状态绑定，确保访问users相关路由时，先加载模块再解析状态，而不是在run块里预加载：

var app = angular.module("app", ["ui.router", "oc.lazyLoad"]);
app.config(function ($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {
  $ocLazyLoadProvider.config({
    modules: [{ name: 'users', files: ['/application/modules/users/app.js'] }]
  });

  $stateProvider
    // 把原来的'/'状态改名为home，符合ui-router的命名规范
    .state('home', {
      url: '/',
      templateUrl: '/application/partials/index.html'
    })
    // 在主模块里定义users抽象状态，通过resolve确保模块加载完成后再进入状态
    .state('users', {
      abstract: true,
      url: '/users',
      template: '<div ui-view="users"></div>',
      resolve: {
        loadUsersModule: function($ocLazyLoad) {
          // 加载users模块，返回promise让ui-router等待加载完成
          return $ocLazyLoad.load('users');
        }
      }
    });

  $urlRouterProvider.otherwise('/');
});
// 删掉原来run块里的$ocLazyLoad.load("users"); 改成按需加载

2. 修改users模块代码（application/modules/users/app.js） #

因为已经在主模块里定义了users抽象状态，这里只需要保留users.list状态即可：

var app = angular.module("users", []);
app.config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('users.list', {
    url: '/list',
    views: {
      "users": { templateUrl: '/application/modules/users/partials/index.html' }
    }
  });
}]);

3. 修正index.html里的ui-sref #

原来的ui-sref="/"是直接写URL，应该改成对应状态名home：

<div ng-app="app">
  <a ui-sref="home">home</a>
  <a ui-sref="users.list">users</a>
  <div ui-view></div>
  <!-- 其他脚本不变 -->
</div>

为什么这样改能解决问题？ #

• 当你访问/users/list或者刷新这个页面时，ui-router会先匹配到users抽象状态，执行resolve里的模块加载操作，等users模块加载完成、users.list状态注册成功后，再继续解析子状态users.list，这样就不会出现找不到状态跳转到默认页的情况了。
• 用状态名代替URL写ui-sref，是ui-router的标准用法，能避免路由配置变更时需要同步修改链接的麻烦。

内容的提问来源于stack exchange，提问作者Maher