Angular ui-router $urlRouterProvider 默认路由配置失效求助

数据老陈

2026-5-19

解决$urlRouterProvider.when跳转无效的问题

嘿，我一眼就瞅见你可能踩的坑了——用$urlRouterProvider.when('/main','/mail/list')没法默认跳转到main.list状态，大概率是这几个原因，咱们一步步排查：

致命拼写错误：你写的目标路径是/mail/list，但你的子状态是main.list，对应的正确URL应该是/main/list啊！把配置改成下面这样先试试：
```
$urlRouterProvider.when('/main','/main/list');
```
这个笔误绝对是最常见的元凶，先修正这个再说。
检查main状态的抽象配置：如果main是抽象状态（设置了abstract: true），那它本身不能被直接激活，必须确保：
1. main状态里包含<ui-view></ui-view>，用来承载子状态的内容；
2. 子状态的URL配置正确，比如main.list的url是/list，这样完整路径就是/main/list。
  给你一个标准的状态配置示例参考：
```
$stateProvider
  .state('main', {
    abstract: true,
    url: '/main',
    template: '<div ui-view></div>' // 必须有这个才能渲染子状态
  })
  .state('main.list', {
    url: '/list',
    templateUrl: 'templates/main-list.html'
  })
  .state('main.details', {
    url: '/details/:itemId',
    templateUrl: 'templates/main-details.html'
  });
```
确认路由配置的加载顺序：一定要保证$urlRouterProvider.when()的代码是在所有状态（main、main.list）定义之后执行的。如果路由规则先于状态定义加载，UI-Router还不知道有main.list这个状态存在，自然没法完成跳转。