Angular1.6 UI-Router与index.jsp路由失效问题求助

Hey there! 作为刚入坑AngularJS 1.6的新手，遇到ui-router路由跳不动的问题真的太常见了，我帮你梳理几个核心排查点，结合你的Spring MVC场景一步步排查：

首先得保证你在index.jsp里正确引入了ui-router的JS文件，然后在你的Angular模块里必须注入ui.router，这一步错了后面全白搭：

// 注意是ui.router，不是uirouter或者其他拼写！
var app = angular.module('CM', ['ui.router']);

另外AngularJS 1.6和ui-router的版本要兼容，尽量用对应版本的ui-router（比如ui-router 0.4.2+适配AngularJS 1.6）。

你的路由配置得符合AngularJS 1.6+ui-router的写法，重点盯这几个地方：

• templateUrl的路径是否正确：如果login.html和index.jsp在同一目录，就写'login.html'；如果在子目录（比如views/下），就得写'views/login.html'，路径错了会直接404
• 默认路由有没有设置：用$urlRouterProvider.otherwise()指定默认跳转的路径
• 状态名称和URL是否匹配

给你个标准配置示例参考：

app.config(function($stateProvider, $urlRouterProvider) {
  // 没匹配到任何路由时，默认跳转到login
  $urlRouterProvider.otherwise('/login');

  $stateProvider
    .state('login', {
      url: '/login',
      templateUrl: 'login.html' // 这里路径一定要对应实际文件位置！
    });
});

ui-router需要一个挂载视图的“容器”，你必须在index.jsp的body里加上<div ui-view></div>，不然就算路由匹配成功了，login.html的内容也没地方渲染：

<body>
  <!-- 这个标签是核心！没有它路由内容根本显示不出来 -->
  <div ui-view></div>
</body>

别光看资源加载了，打开浏览器F12的Console标签页，有没有红色报错？比如：

• 提示$stateProvider is not defined：说明你没注入ui.router模块
• 提示GET login.html 404：要么路径错了，要么Spring MVC拦截了静态文件
• 提示Angular模块注入错误：检查模块名称拼写

这些报错直接告诉你问题出在哪！

因为你用了Spring MVC，它默认会拦截所有请求，包括html静态文件，所以得在Spring的配置文件里加静态资源映射，让Spring放过这些文件：

<!-- 假设你的html、js、css都放在webapp/static目录下，按需调整路径 -->
<mvc:resources mapping="/**" location="/static/"/>

如果login.html不在静态资源目录里，Spring会把它当成Controller的请求去处理，自然返回404，路由肯定跳不动。

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