接受指定状态后的任何后续字符 URL

Question

我正在使用 ui-router 并且我的状态之一 URL 可以附加一个动态密钥。所以状态看起来像这样：

.state('reset-password', {
    url: '/reset-password/{.*}',
    template: require('html-loader!./features/forgot-password/html/reset-password.tpl.htm'),
    controller: 'ResetPasswordController',
    controllerAs: '$ctrl',
})

但是 URL 可能是 /reset-password/134042?emailAddress=email@email.com。

但是如果这样输入，状态是不被识别的，默认加载/login状态：

$urlRouterProvider 
    .otherwise("/login")

问题

如何允许在 /reset-password 之后进行任何动态 URL？

Answer 1

如果您希望 URL 的尾部匹配某个状态，则可以使用以下任一（等效）语法：

/reset-password/{path:.*}
/reset-password/*path

通常需要注意的是尾部绑定到一个名称（即 path）。

然后您应该能够通过控制器中的 $stateParams 访问它。

或者，如果您想让 ui-router 做更多解析 URL 参数的繁重工作，您也可以这样做。

包括以下一些方法：

angular
  .module('app', ['ui.router'])
  .config(function ($stateProvider) {
    $stateProvider
      .state({
        name: 'reset-password1',
        url: '/reset-password1/*path',
        controller: function ($stateParams) {
          this.path = $stateParams.path;
        },
        controllerAs: '$ctrl',
        template: '<pre>path={{$ctrl.path}}</pre>'
      })
      .state({
        name: 'reset-password2',
        url: '/reset-password2/:id?email',
        controller: function ($stateParams) {
          this.id = $stateParams.id;
          this.email = $stateParams.email;
        },
        controllerAs: '$ctrl',
        template: '<pre>id={{$ctrl.id}} email={{$ctrl.email}}</pre>'
      });
  });

<div ng-app="app">
  <a ui-sref="reset-password1({ path: '134042?email=email@email.com' })" ui-sref-active="active">Reset Password (1)</a>
  <a ui-sref="reset-password2({ id: 134042, email: 'email@email.com' })" ui-sref-active="active">Reset Password (2)</a>
  <ui-view></ui-view>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.28/angular-ui-router.min.js "></script>

接受指定状态后的任何后续字符 URL

Accept any proceeding characters after specified state URL

state

angularjs

angular-ui-router