使用 AngularJS ui-router 深度鏈接到 URL 的問題

Question

我剛剛遇到了一個問題，該問題似乎是由於我更改了我的應用程序的文件夾結構而發生的（但我認為這是一個“紅鯡魚”）。 我有一個小的 AngularJS 應用程序，為了整理一下，我將一部分功能移到了它自己的文件夾中。 我更新了所有<script>標記引用，我的$stateProvider部分中的所有視圖templateUrl值...我沒有收到 404 錯誤，所有控制器和視圖都已加載但我注意到在我的應用程序中我無法直接鏈接到特定的 URL（我以前可以）。 我希望直接/深層鏈接到的 URL 是http://myapp.com/an/membership

當我在瀏覽器中鍵入此內容時，出現GET http://myapp.com/an/membership/ 403 (Forbidden)錯誤。 該路線有 4 個子狀態/網址。 我可以深入鏈接到所有這些。 更糟的是，如果我的應用程序中有一個鏈接（使用ui-sref ），我可以毫無問題地鏈接到我的狀態/ url ...這是我的狀態/路由代碼...我添加了一些評論來解釋我的問題...

/* This is the parent state of my membership state !! */    
.state('sfm.in', {
  abstract: true,
  url: '/an/',
  templateUrl: '/an/views/member-home/member-home-wrapper.html'
})
/* here the url is http://myapp.com/an/membership - I can link to it using ui-sref but can't deep link, I get a "403 forbidden", everything loads as expected (not sure if I need the abstract). */
      .state('sfm.in.membership', {
        url: 'membership', 
        templateUrl: '/an/membership/views/membership.html',
        controller: 'MembershipCtrl',
        abstract: true
      })
      /* this child state is a default and has the same URL as the parent - http://myapp.com/an/membership*/
      .state('sfm.in.membership.advantages', {
        url: '',
        templateUrl: '/an/membership/views/membership-advantages.html'
      })
      /* No problem with deeplinking - http://myapp.com/an/membership/payment */
      .state('sfm.in.membership.payment', {
        url: '/payment',
        controller: 'MembershipPaymentCtrl',
        templateUrl: '/an/membership/views/membership-payment.html'
      })
      /* No problem with deeplinking http://myapp.com/an/membership/account */
      .state('sfm.in.membership.account', {
        url: '/account',
        controller: 'MembershipAccountCtrl',
        templateUrl: '/an/membership/views/membership-account.html'
      })
      /* No problem with deeplinking http://myapp.com/an/membership/data */
      .state('sfm.in.membership.data', {
        url: 'data',
        controller: 'MembershipDataCtrl',
        templateUrl: '/an/membership/views/membership-data.html'
      });

我已經在我的應用程序中正確設置了$locationProvider.html5Mode （因為我可以深度鏈接，在瀏覽器中輸入其他 URLS 的 url）。

任何人都可以在這里看到問題嗎？ *更新*我在路由示例中添加了父狀態，請參閱第一個答案中的評論！

Answer 1

您在第一個狀態中忘記了“/”：

.state('sfm.in.membership', {
    url: '/membership', 
    templateUrl: '/an/membership/views/membership.html',
    controller: 'MembershipCtrl',
    abstract: true
})

Answer 2

這看起來很奇怪，但我認為問題是瀏覽器在我輸入網址時將其放在前面。我最終更改了代碼......但這里沒有真正的變化......我認為瀏覽器是問題所在。 與此同時，我更改了 URL，但清除歷史記錄/緩存也可以解決問題。

  .state('sfm.in.membership', {
    abstract: true,
    url: 'member-ship',
    templateUrl: '/an/membership/views/membership.html'
  })
  .state('sfm.in.membership.advantages', {
    url: '',
    templateUrl: '/an/membership/views/membership-advantages.html'
  })
  .state('sfm.in.membership.payment', {
    url: '/payment',
    controller: 'MembershipPaymentCtrl',
    templateUrl: '/an/membership/views/membership-payment.html'
  })
  .state('sfm.in.membership.account', {
    url: '/account',
    controller: 'MembershipAccountCtrl',
    templateUrl: '/an/membership/views/membership-account.html'
  })
  .state('sfm.in.membership.data', {
    url: '/data',
    controller: 'MembershipDataCtrl',
    templateUrl: '/an/membership/views/membership-data.html'
  })