Angularjs SPA详细信息页面刷新

我正在使用Angularjs开发SPA应用程序，应用程序中的所有导航都可以正常工作，但当我尝试刷新详细信息页面examle:www.domain.com/traveldetail/123时，它会停止页面

app.js

travelApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise("travellist");
    $stateProvider
      .state('/', {
          url: '/',
          templateUrl: 'Partials/travellist.html',
          controller: 'TravelListController'
      })
      .state('travellist', {
          url: '/travellist',
          templateUrl: 'Partials/travellist.html',
          controller: 'TravelListController'
      })
      .state('traveldetail', {
          url: '/traveldetail/:travelId',
          templateUrl: 'Partials/traveldetail.html',
          controller: 'TravelDetailController'
      })
}])

Web.config

    <rewrite>
      <rules>
        <rule name="TravelList" stopProcessing="true">
          <match url="^travellist" />
          <action type="Rewrite" url="/" />
        </rule>
        <rule name="TravelDetail" stopProcessing="true">
          <match url="^traveldetail" />
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>

---

这里的状态应该是父级和子级，例如

travelApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise("travellist");
$stateProvider
  .state('travel', {
      url: '/',
      templateUrl: 'Partials/travellist.html',
      controller: 'TravelListController'
  })
  .state('travel.list', {
      url: '/travellist',
      templateUrl: 'Partials/travellist.html',
      controller: 'TravelListController'
  })
  .state('travel.list.detail', {
      url: '/traveldetail/:travelId',
      templateUrl: 'Partials/traveldetail.html',
      controller: 'TravelDetailController'
  })

}]

---

您可以参考

为什么这很重要，在这种情况下，状态只是一个名称。正如我所说的，除了刷新细节页面，它可以正常导航和工作。你能再解释一下吗？

travelApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise("travellist");
$stateProvider
  .state('travel', {
      url: '/',
      templateUrl: 'Partials/travellist.html',
      controller: 'TravelListController'
  })
  .state('travel.list', {
      url: '/travellist',
      templateUrl: 'Partials/travellist.html',
      controller: 'TravelListController'
  })
  .state('travel.list.detail', {
      url: '/traveldetail/:travelId',
      templateUrl: 'Partials/traveldetail.html',
      controller: 'TravelDetailController'
  })