javascript - 使用 AngularJS ui-router 深度链接到 URL 的问题

Question

我刚刚遇到了一个问题，该问题似乎是由于我更改应用程序的文件夹结构而发生的(但我认为这是“红鲱鱼”)。我有一个小型 AngularJS 应用程序，为了整理内容，我将一部分功能移至其自己的文件夹中。我全部更新了<script>标签引用，所有 View templateUrl我的值 $stateProvider部分...我没有收到 404 错误，所有 Controller 和 View 都已加载，但我注意到在我的应用程序中我无法直接链接到特定的 URL(我以前可以)。我希望直接/深层链接的 URL 是 http://myapp.com/an/membership

当我在浏览器中输入此内容时，我得到 GET http://myapp.com/an/membership/ 403 (Forbidden)错误。该路线有 4 个子状态/url。我可以深入链接到所有这些。更糟糕的是，如果我的应用程序中有一个链接(使用 ui-sref )，我可以毫无问题地链接到我的状态/网址...这是我的状态/路由代码...我添加了一些注释来解释我的问题...

/* 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在我的应用程序中(因为我可以深层链接，请在浏览器中输入其他 URL 的 URL)。

有人能看出这里有问题吗？ *更新*我已经在路由示例中添加了父状态，请参阅第一个答案中的评论!

Answer 1

您在第一个状态中忘记了“/”:

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