在angular中,如何使用$stateProvider来处理页面刷新,让页面在刷新时回到之前的状态

how to handle page refresh with $stateProvider as page goto previous state on refresh in angular?

本文关键字:刷新 状态 angular 何使用 stateProvider 处理      更新时间:2023-09-26

我想在我的登录页面中使用$stateProvider处理页面刷新,当我点击链接时,他们是一个忘记的pwd链接,忘记pwd页面按照路由代码显示,但现在我有一个问题,当我刷新我忘记的pwd页面时,我的页面被重定向到登录页面,请告诉我如何解决这个问题?

这是我的login.html页面忘记了PWD链接:

<div class="input-element-row">
                <div class="forgot-pass"><a ui-sref="forgot">Forgot password?</a></div>
            </div>

下面是我的router.js中包含的路由代码:

angular.module("nk.login", [
    'ngRoute',
    'ngAnimate'
  ]).
    config(['$stateProvider',function($stateProvider){
      $stateProvider
        .state('app.login', {
          url: '/login',
          views: {
            "content": {
              templateUrl: 'src/login/templates/login.html',
              controller: 'loginController'
            }
          }
        })
          .state('app.forgotPassword', {
              url: '/forgot',
              views: {
                  "content": {
                      templateUrl: 'src/login/templates/forgotPassword.html',
                      controller: 'forgotPasswordController'
                  }
              }
          })
    }]);
这是我的forgotpwd.html页面:

<div class="inputs-container">
            <form name="forgotPassword" novalidate>
                <div class="input-element-row">
                    <div class="rgt-input-box fl"><span class="center-icon action-icon"></span><input type="text"
                    ng-model="Nuser.center_code" placeholder="Center Code" name="CenterCode" value=""
                          ng-pattern = "/^[0-9a-zA-Z]*$/" maxlength="5" required ng-disabled="isDisable"/></div>
                    <div class="cb">
                    </div>
                </div>
                <div class="input-element-row">
                    <div class="rgt-input-box fl"><span class="user-icon action-icon"></span><input type="text"
                    placeholder="User ID"  ng-model="Nuser.login_id" name="UserID" value=""
                    ng-pattern = "/^[0-9a-zA-Z]*$/" maxlength="10" required ng-disabled="isDisable"/></div>
                    <div class="cb"></div>
                </div>


                <div class="input-element-row">
                    <button type="button" name="send"  ng-click="send(userLogin)">Send</button>
                </div>
            </form>
        </div>

也许你的路由可以简化如下

angular.module("nk.login", [
'ngRoute',
'ngAnimate'
]).
config(['$stateProvider',function($stateProvider){
  $stateProvider
    .state('app.login', {
      url: '/login',
      templateUrl: 'src/login/templates/login.html',
      controller: 'loginController'
    })
      .state('app.forgotPassword', {
       url: '/forgot',
       templateUrl: 'src/login/templates/forgotPassword.html',
       controller: 'forgotPasswordController'
      })
}]);

视图/内容属性有什么特殊的原因吗?