angular.js - ui.router 二级嵌套,一级的可以跳，二级不能

Question

top.html

<header class="header xh-transition xh-boxShadow" layout="row vertical space-between">

<a href="#" class="left-nav xh-block xh-a-fff underline-none">
    <i  class="fa fa-heart-o vertical-text-top" aria-hidden="true"></i>
    <span  class="vertical-middle">joyKit</span>
</a>
<span class="xh-relative">
    <button class="menu-btn xh-background-none xh-border-none xh-none768k" type="button">
        <svg class="menu transition" viewBox="0 0 40 40">
            <g>
                <path d="M24,16c2.2,0,4-1.8,4-4s-1.8-4-4-4c-2.2,0-4,1.8-4,4S21.8,16,24,16z" fill="rgba(51,102,153,1)" transform="rotate(9720 24 12)"></path>
                <path d="M24,20c-2.2,0-4,1.8-4,4s1.8,4,4,4c2.2,0,4-1.8,4-4S26.2,20,24,20z"  fill="rgba(51,102,153,1)" transform="rotate(9720 24 24)"></path>
                <path d="M24,32c-2.2,0-4,1.8-4,4s1.8,4,4,4c2.2,0,4-1.8,4-4S26.2,32,24,32z"  fill="rgba(51,102,153,1)" transform="rotate(9720 24 36)"></path>
            </g>
        </svg>
    </button>
    <input class="checkbox" type="checkbox" />
    <ul class="floatfix wow bounceInRight">
        <li class="nav-item pull-left">
            <a ui-sref="index" class="xh-a-fff">导航1</a>
        </li>
        <!-- /.nav-item -->
        <li class="nav-item pull-left">
            <a ui-sref="test" class="xh-a-fff">导航2</a>
             <ul>
               <li><a ui-sref=".test2" class="xh-a-fff">erji</a></li>
            </ul>
        </li>
        <!-- /.nav-item -->
        <li class="nav-item pull-left">
            <a href="#" class="xh-a-fff">导航3</a>
        </li>
        <!-- /.nav-item -->
        <li class="nav-item pull-left">
            <a href="#" class="xh-a-fff">导航4</a>
        </li>
        <!-- /.nav-item -->
        <li class="nav-item pull-left">
            <a href="#" class="xh-a-fff">导航5</a>
        </li>
        <!-- /.nav-item -->
        <li class="nav-item pull-left">
            <a href="#" class="xh-a-fff">导航6</a>
        </li>
        <!-- /.nav-item -->
    </ul>
</span>

</header>

app.js
/**

• Created by joykit on 2017/1/12.
  */

(function () {

'use strict';
var app = angular.module('app', [
    'ui.router'
]);
app.config(['$stateProvider', '$urlRouterProvider',function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('', 'index');
    $stateProvider.state('index',{
        url: '/index',
        templateUrl: 'views/index.html',
        menu: 'index'
    }).state('test',{
        url: '/test',
        templateUrl: 'test.html',
        menu: 'test'
    }).state('test.test2',{
        url: '/test2',
        templateUrl: 'test2.html',
        menu: 'test2'
    });
}]);

})(angular);

Answer 1

parent: 'test'   吗？

Answer 2

<ul class="floatfix wow bounceInRight">
        <li class="nav-item pull-left">
            <a ui-sref="index" class="xh-a-fff">导航1</a>
        </li>
        <!-- /.nav-item -->
        <li class="nav-item pull-left">
            <a ui-sref="test" class="xh-a-fff">导航2</a>
             <ul>
               <li><a ui-sref="test.test2" class="xh-a-fff">erji</a></li>
            </ul>
        </li>
    </ul>

$urlRouterProvider.when('', 'index');
    $stateProvider.state('index',{
        url: '/index',
        templateUrl: 'views/index.html',
        menu: 'index'
    }).state('test',{
        url: '/test',
        templateUrl: 'test.html',
        menu: 'test'
    }).state('test.test2',{
        url: '/test2',
        templateUrl: 'test2.html',
        menu: 'test2'
    });