Angular ui -路由器设置网站入口点.重定向到主页URL

Angular UI-router set website entry point. Redirect to home URL

本文关键字：重定向 主页 URL 入口 网站 ui 路由器 设置 Angular      更新时间：2023-09-26

我正在使用Angular的UI-router，我希望用户总是(或者在大多数情况下，为了简洁，我们可以用"always")在step1上进入web应用，也就是我的主页。

UI-router配置简写:

.config(function($stateProvider, $urlRouterProvider) {
    // route to root if no valid route found
    $urlRouterProvider.otherwise('/step1');
    var step1 = {
        name : 'step1',
        url : '/step1',
        templateUrl: 'partials/step1.html'
    };
    var step2 = {
        name : 'step2',
        url : '/step2',
        templateUrl: 'partials/step2.html'
    };
    .
    .
    .
    .
}

我可以做一个解析或指定一个控制器，并简单地设置$location.path('/step1')，但是有没有一种方法可以只设置一个入口点，并有step2/step3的url只能从step1开始后到达，没有重定向的成本?
提前感谢

为了解决这个问题，你也可以使用$stateChangeStart事件。

$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
  if (fromState.name === '' && toState.name !== 'state1'){
    event.preventDefault();
    $state.go('state1');
  }
});

来源:https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions how-to-create-rules-to-prevent-access-to-a-state

我想这就是你想要的- 

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('step1', {
          url: "/step1",
          templateUrl: "partials/step1.html",
          controller: "step1Ctrl"
        })
        .state('step2', {
          parent: 'step1',
          url: "/step2",
          templateUrl: "partials/step2.html",
          controller: "step2Ctrl"
        })
        .state('step3', {
          parent: 'step2',
          url: "/step3",
          templateUrl: "partials/step3.html",
          controller: "step3Ctrl"
        });
    // route to root if no valid route found
    $urlRouterProvider.otherwise('/step1');
})

这是一个按钮，点击它后会导航到步骤2 -

<button ui-sref="step2">Step 2</button>

相关文章：