如何在Angular 1.6中使用$state将错误URL重定向至404页面

嘿，我刚好在Angular 1.6项目里处理过这个需求，结合你已经定义好的404状态，这就给你说清楚怎么实现：

核心思路：用$urlRouterProvider的兜底规则触发$state跳转 #

AngularJS的路由系统里，$urlRouterProvider负责处理URL的匹配和重定向，我们可以用它的otherwise方法来捕获所有未匹配到已定义路由的请求，然后通过$state服务跳转到你已经配置好的404状态。

具体代码实现 #

在你的路由配置模块（通常是.config块）里，注入$stateProvider和$urlRouterProvider，先保留你已有的404状态配置，再添加兜底重定向规则：

angular.module('你的应用模块名')
  .config(function($stateProvider, $urlRouterProvider) {
    // 你已定义的404状态（原样保留）
    $stateProvider.state('404', {
      url: '/404',
      template: '<page-404></page-404>',
      ncyBreadcrumb: { label: '404' },
      data: {requiredLogin: false}
    });

    // 配置未匹配URL的兜底重定向
    $urlRouterProvider.otherwise(function($injector) {
      // 因为在.config块里不能直接注入$state，所以用$injector来获取
      var $state = $injector.get('$state');
      // 跳转到已定义的404状态
      $state.go('404');
    });
  });

为什么不用直接写otherwise('/404')？ #

如果你直接写$urlRouterProvider.otherwise('/404')，虽然也能显示404页面，但不会触发$state的完整状态切换逻辑——比如你配置的ncyBreadcrumb标签更新、data.requiredLogin的权限判断这些都不会生效。用$state.go('404')能完整触发状态的生命周期，完美适配你已有的404状态配置。

可选：排除特定URL不重定向 #

如果你的应用里有一些特殊URL（比如后端API接口）不想被重定向到404，可以在otherwise的回调里做判断：

$urlRouterProvider.otherwise(function($injector, $location) {
  var $state = $injector.get('$state');
  var currentPath = $location.path();
  
  // 比如排除所有/api开头的路径，交给后端处理
  if (currentPath.startsWith('/api')) {
    return currentPath; // 返回原路径，不做重定向
  }
  
  // 其他未匹配路径跳转到404
  $state.go('404');
});

这样配置完成后，所有用户访问的未定义URL都会被自动重定向到你设置的404页面啦！

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