AngularJs:UI路由器浏览器刷新，移动到第一个子状态

AngularJs: UI Router browser refresh, move to first child state?

本文关键字：移动 第一个 状态 刷新 UI 路由器 浏览器 AngularJs      更新时间：2023-09-26

我使用的是angular UI Router，而不是HTML5模式。以下是路由器配置。我正在为订单处理应用程序的每个步骤使用嵌套视图。订购过程的每一步都取决于前一步我的问题是，在浏览器刷新的第2步或第3步的订购过程；所有输入数据都丢失了，所以我希望用户重定向到订购过程的初始步骤1

  $stateProvider
        .state('wizard', {
            url: "/wizard",
            templateUrl: 'template/newOrder.cshtml',
            controller: 'createOrderController',
            controllerAs: 'vm',
            data: { pageTitle: 'Wizard form' }
        })
        .state('wizard.step_one', {
            url: '/step_one',
            templateUrl: 'template/step1.cshtml',
            controller: 'orderStep1Controller',
            controllerAs:'vm',
            data: { pageTitle: 'Wizard form' }
        })
        .state('wizard.step_two', {
            url: '/step_two',
            templateUrl: 'template/step2.cshtml',
            controller: 'orderStep2Controller',
            controllerAs: 'vm',
            data: { pageTitle: 'Wizard form' }
        })
        .state('wizard.step_three', {
            url: '/step_three',
            templateUrl: 'template/step3.cshtml',
            controller: 'orderStep3Controller',
            controllerAs: 'vm',
            data: { pageTitle: 'Wizard form' }
        })
    .state('wizard.step_four', {
        url: '/step_four',
        templateUrl: 'template/step4.cshtml',
        controller: 'orderStep4Controller',
        controllerAs: 'vm',
        data: { pageTitle: 'Wizard form' }
    })
    ;

问候，

我假设/wizard状态实际上除了保持嵌套视图之外没有做任何事情。

您可能需要更改一些内容，使其成为一个抽象视图来保存所有状态，包括将neworder.cshtml更改为自己的状态：

.state('wizard', {
        url: "/wizard",
        abstract: true,
        templateUrl: 'template/newOrder.cshtml',
        controller: 'createOrderController',
        controllerAs: 'vm',
        data: { pageTitle: 'Wizard form' }
    })

可以在Ui Router GitHub 中找到更多深入的信息以及如何使用抽象

它包括关于如何执行urlRouterRedirects的gret信息，在这种情况下，根据您希望何时执行，这些信息可能会有用。你可以说，当你登陆向导视图时，重定向到新订单（例如下面）

$urlRouterProvider.when（'/wwizard'，'/wozard/neworder'）；

如果您想在特定事件之后捕获它，也可以使用.otherwise。

$urlRouterProvider.否则（'/ethere'）；

必须像往常一样在状态上定义/否则url：

$stateProvider.state（"否则"，｛url:"/否则"…｝）

相关文章：