$urlRouterProvider.otherwise无法跳转到默认路由问题求助

嘿，我懂你刚接触ui-router视图嵌套时的迷茫，尤其是默认路由跳转这块，很容易踩坑！先拆解你的问题，再给你一步步解决：

问题分析 #

你现在设置的$urlRouterProvider.otherwise("dashboard")，只有当路由完全不匹配任何已定义的state时才会触发。而访问/的时候，会直接匹配到home这个state，所以并不会触发跳转到dashboard的逻辑。另外，home.dashboard作为嵌套state，还得确保父视图里有承载子视图的容器，不然子页面根本渲染不出来。

解决方案 #

1. 给home状态添加重定向（推荐） #

直接让访问/时自动跳转到嵌套的home.dashboard，既符合嵌套结构，又实现了默认跳转：

angular.module("app")
.config(function($stateProvider, $locationProvider, $urlRouterProvider){
  // 保留otherwise处理未匹配的路由，比如输入不存在的路径时跳转到登录页
  $urlRouterProvider.otherwise("/login");
  
  $stateProvider
  .state("home",{
    url: "/",
    templateUrl: "views/home/home.html",
    // 核心：访问父路由时自动重定向到子状态
    redirectTo: "home.dashboard"
  })
  .state("login",{
    url: "/login",
    templateUrl: "views/login/login.html"
  })
  .state("home.dashboard",{
    // 注意这里不要加开头的/，会自动和父路由的/拼接成"/dashboard"
    url: "dashboard",
    templateUrl: "views/home/dashboard.html" // 补全你的dashboard模板路径
  });
  
  // 如果需要开启HTML5模式（可选），记得同时在页面<head>里加<base href="/">
  // $locationProvider.html5Mode(true);
});

2. 必须确保父视图有<ui-view>容器 #

在views/home/home.html里一定要加上<ui-view>标签，否则嵌套的home.dashboard视图没有渲染的地方：

<!-- home.html 示例结构 -->
<div class="home-container">
  <!-- 这里放home页面的公共内容，比如侧边栏、顶部导航 -->
  <div class="main-content">
    <!-- 子视图（dashboard）会渲染到这个标签里 -->
    <ui-view></ui-view>
  </div>
</div>

3. 备选方案：用$urlRouterProvider.when直接指定跳转 #

如果你不想给home状态加redirectTo，也可以直接添加路由匹配规则：

$urlRouterProvider
.when("/", "/dashboard") // 访问/时直接跳转到/dashboard
.otherwise("/login");

这种方式要注意，home.dashboard的url需要写成/dashboard（带开头的/，绝对路径），才能正确匹配。

关键注意点 #

• 嵌套state的url：子状态url开头不加/，会和父state的url拼接；加/则是绝对路径，和父路由无关。
• 视图嵌套的核心：父state的模板必须包含<ui-view>，否则子视图无法渲染。

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