如何处理Location非法路径并重定向至默认状态？异常URL报错排查

首先咱们拆解下你遇到的问题：当输入http://localhost:3000/#!///时，这个URL会被AngularUI Router解析为三个空字符串的路由参数（primaryId、moduleType、modelId全为空），但你的路由配置既没处理空参数匹配失败的场景，otherwise的兜底逻辑也因为路由解析优先级问题没触发，最终导致报错。

下面是具体的修复方案，你可以根据需求选择：

1. 给路由参数添加可选标记 #

把dashboard路由的URL参数改为可选（参数名后加?），这样即使参数为空也能匹配到该路由，之后再在路由内部验证参数有效性：

$stateProvider
  // Home
  .state('dashboard', {
    url: '/:primaryId?/:moduleType?/:modelId?', // 加?标记参数可选
    templateUrl: "app/dashboard/dashboard.html",
    resolve: {
      validateParams: function($stateParams, $state) {
        // 如果任意参数为空，跳转到404
        if (!$stateParams.primaryId || !$stateParams.moduleType || !$stateParams.modelId) {
          return $state.go('404');
        }
      }
    }
  })
  // Extra
  .state('404', {
    url: '/404',
    templateUrl: "app/page-extra/404.html"
  });

2. 优化otherwise的兜底逻辑 #

原来的函数式otherwise可能因为路由解析时序问题没触发，你可以改成直接指定404的URL，或者在函数里增加错误捕获与日志排查：

// 方案A：直接跳转到404的URL，简洁高效
$urlRouterProvider.otherwise('/404');

// 方案B：保留函数式写法，增加日志便于排查
$urlRouterProvider.otherwise(function ($injector, $location) {
  console.log('兜底逻辑触发，当前路径：', $location.path());
  var $state = $injector.get('$state');
  try {
    return $state.go('404');
  } catch(e) {
    console.error('跳转404失败：', e);
  }
});

3. 处理根路径与空参数场景 #

添加对根路径（/）和空参数路径的重定向规则，避免出现未匹配的情况：

// 访问根路径时直接跳转到404
$urlRouterProvider.when('/', '/404');
// 或者跳转到带默认参数的dashboard
// $urlRouterProvider.when('/', '/defaultPrimary/defaultModule/defaultModel');

// 专门处理空参数路径（比如///）
$urlRouterProvider.when('///', '/404');

4. 严格校验路由参数格式 #

如果你的参数有特定格式要求（比如必须是字母数字组合），可以在路由中用正则表达式限制参数匹配：

.state('dashboard', {
  // 限制参数为非空的字母数字组合
  url: '/:primaryId([a-zA-Z0-9]+)/:moduleType([a-zA-Z0-9]+)/:modelId([a-zA-Z0-9]+)',
  templateUrl: "app/dashboard/dashboard.html"
})

这样当参数为空或不符合格式时，路由会匹配失败，自动触发otherwise的兜底逻辑。

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