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

【问题标题】：Problems with deep linking to URL with AngularJS ui-router使用 AngularJS ui-router 深度链接到 URL 的问题
【发布时间】：2016-04-23 19:12:50
【问题描述】：

我刚刚遇到了一个似乎是由于我更改了我的应用程序的文件夹结构而发生的问题（但我认为这是一个“红鲱鱼”）。我有一个小型 AngularJS 应用程序，为了整理东西，我将一部分功能移到了它自己的文件夹中。我更新了所有<script> 标记引用，我的$stateProvider 部分中的所有视图templateUrl 值...我没有收到404 错误，所有控制器和视图都已加载，但我注意到在我的应用程序中我不能t 直接链接到特定的 URL（我以前可以）。我希望直接/深层链接的 URL 是 http://myapp.com/an/membership

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

/* 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（因为我可以进行深度链接，在浏览器中输入其他网址的网址）。

任何人都可以在这里看到问题吗？ * UPDATE * 我在路由示例中添加了父状态，请查看我在第一个答案中的评论！

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

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

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

【讨论】：

我原本以为，但是当我添加正斜杠时，url 'myapp.com/an/membership' 不起作用，但 'myapp.com/an//membership' 呢？
你在哪里声明状态：/an ??
我刚刚更新了示例...添加了“an”路由！
您必须删除最后一个“/”。试试 url: '/an'
有了这个，它必须工作：.state('sfm.in', { abstract: true, url: '/an', templateUrl: '/an/views/member-home/member- home-wrapper.html' }) .state('sfm.in.membership', { url: '/membership', templateUrl: '/an/membership/views/membership.html', 控制器: 'MembershipCtrl', 摘要： true }) 总是同样的错误？ 403？

【解决方案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'
  })

【讨论】：