AngularJS未渲染$routeProvider指定视图，路由跳至otherwise而非.when配置URL

我来帮你捋捋这个AngularJS路由的问题——碰到配置的视图没渲染、还自动跳去otherwise指定的URL，大概率是路由匹配规则或配置细节出了纰漏，下面是几个常见的排查点和解决办法：

• 检查路由路径的匹配精度
  AngularJS的路由默认是严格匹配的，大小写、末尾斜杠这类细节都会影响匹配结果。比如你配置的是'/user/:id'，但访问的是'/User/123'（大小写不一致）或者'/user/123/'（多了末尾斜杠），都会导致匹配失败触发otherwise。
  要是需要忽略大小写，可以在路由配置里加上caseInsensitiveMatch: true：

  .when('/user/:id', {
    templateUrl: 'user.html',
    controller: 'UserController',
    caseInsensitiveMatch: true
  })
  

• 确认路由模块的依赖是否正确
  AngularJS的路由功能依赖单独的ngRoute模块，你得先在HTML里引入angular-route.js，再在模块声明中添加依赖：

  var app = angular.module('myApp', ['ngRoute']);
  

  要是漏了这一步，$routeProvider根本不会生效，所有请求都会直接走otherwise。

• 验证模板路径的正确性
  如果.when()里的templateUrl路径写错了，浏览器加载模板失败时，也可能表现为视图无法渲染（容易让你误以为路由没匹配）。打开浏览器控制台的Network标签，看看有没有404的模板请求，修正路径就能解决。

• 排查路由参数的校验逻辑
  如果你用了路由参数（比如:id），要确认访问URL里的参数符合预期格式。比如你期望id是数字，但访问的是'/user/abc'，要是你在resolve里加了参数校验逻辑，验证失败可能会触发意外跳转：

  .when('/user/:id', {
    templateUrl: 'user.html',
    controller: 'UserController',
    resolve: {
      validateId: function($route, $location) {
        if (isNaN($route.current.params.id)) {
          $location.path('/404'); // 这里如果指向了otherwise的路径，就会出现问题
        }
      }
    }
  })
  

  检查下这类逻辑是不是导致了非预期的跳转。

• 确认otherwise的配置顺序
  路由配置的顺序非常关键！otherwise()必须放在所有.when()的最后面。要是把它放在前面，后面的所有路由配置都会被忽略，所有请求都会走otherwise。正确的配置顺序应该是这样：

  app.config(function($routeProvider) {
    $routeProvider
      .when('/home', { templateUrl: 'home.html' })
      .when('/user/:id', { templateUrl: 'user.html' })
      .otherwise({ redirectTo: '/404' }); // 最后才配置otherwise
  });
  

• 查看浏览器控制台的错误提示
  打开F12控制台，看看有没有AngularJS相关的错误信息，比如$injector:modulerr（模块加载失败）、$route:noroute（路由匹配失败），这些错误能直接帮你定位问题根源。

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