AngularJS 1.6+UI-Router HTML5模式下，如何阻止刷新加载指定状态？

我来给你个精准的解决方案，刚好适配你用的AngularJS 1.6 + UI-Router HTML5模式的场景。核心思路是利用UI-Router的路由过渡钩子，区分初始加载（刷新/直接粘贴链接打开）和后续手动导航，在初始加载时拦截modalform状态的跳转，重定向到父状态recordform，之后正常允许手动访问。

实现步骤 #

• 用一个标志位区分初始加载和后续导航
• 监听路由过渡的onStart事件，在跳转开始前判断并拦截
• 初始加载完成后更新标志位，允许后续正常访问

具体代码 #

在你的AngularJS应用的run块中添加以下逻辑：

angular.module('你的应用模块名')
.run(function($transitions, $state) {
  // 标记是否为首次加载（刷新/直接打开链接）
  let isInitialLoad = true;

  // 监听所有路由过渡的开始事件
  $transitions.onStart({}, function(transition) {
    const targetState = transition.to();
    
    // 仅在初始加载时拦截modalform状态
    if (isInitialLoad && targetState.name === 'modalform') {
      // 从路由参数中提取父状态需要的formid和recordid
      const routeParams = transition.params();
      
      // 取消当前过渡，重定向到父状态recordform
      return $state.target('recordform', {
        formid: routeParams.formid,
        recordid: routeParams.recordid
      });
    }
  });

  // 监听路由过渡成功事件，初始加载完成后更新标志位
  $transitions.onSuccess({}, function() {
    if (isInitialLoad) {
      isInitialLoad = false;
    }
  });
});

关键细节说明 #

• 为什么用$transitions？ UI-Router 1.x（适配AngularJS 1.6的版本）推荐用$transitions服务代替旧的$stateChangeStart事件，它能更精准地控制路由过渡。
• 参数继承问题：因为modalform是recordform的子状态，UI-Router会自动继承父状态的formid和recordid参数，所以我们可以直接从transition.params()中拿到这些值，不用手动解析URL。
• 拦截时机：在onStart阶段拦截，能避免modalform的控制器、模板被加载，体验更流畅，比在控制器里判断要高效得多。

测试一下：刷新页面或直接粘贴/form/xxx/xxx/modalform/yyy/yyy的链接，会自动跳转到/form/xxx/xxx；之后点击页面上打开模态框的按钮，modalform状态能正常加载，完全符合你的需求。

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