AngularJS - 当用户输入错误的URL时$ stateProvider

Question

我是一名新的学生。 我在我的项目中使用状态提供程序，我不想改变它。因为代码已经完成。

这是我的代码：

function config($stateProvider, $urlRouterProvider) {



$urlRouterProvider 
 .when('/SecondMain', '/SecondMain/OtherPageOne')
 .when('/Main', '/Main/PageOne')
 .otherwise("/notfound")

$stateProvider
    .state('Main', {
        abstract: true,
        url: "/Main",
        templateUrl: "/templates/Common/Main.html"
    })
    .state('SecondMain', {
        abstract: true,
        url: "/SecondMain",
        templateUrl: "/templates/Common/SecondMain.html"
    })
    .state('notfound', {
        url: "/NotFound",
        templateUrl: "/templates/Common/NotFound.html"
    })
    .state('Main.PageOne', {
        url: "/Main/PageOne",
        templateUrl: "/templates/Main/PageOne.html"
    })
    .state('Main.PageTwo', {
        url: "/Main/PageTwo",
        templateUrl: "/templates/Main/PageTwo.html"
    })
    .state('SecondMain.OtherPageOne', {
        url: "/SecondMain/PageOne",
        templateUrl: "/templates/SecondMain/OtherPageOne.html"
    })
    .state('SecondMain.OtherPageTwo', {
        url: "/SecondMain/PageTwo",
        templateUrl: "/templates/SecondMain/OtherPageTwo.html"
    })
angular
    .module('inspinia')
    .config(config)
    .run(function ($rootScope, $state) {
        $rootScope.$state = $state;
    });
}

我想要一个这样的逻辑：如果用户放了：

  

/主要/ PageThree

此页面不存在，但用户使用

启动网址

  

/主要

所以他需要去 - ＆gt; /主要/ PAGEONE

如果用户输入：

  

/ MA / PAGEONE

/ Ma 不存在，用户启动网址完全错误，因此他转到 - ＆gt; / Notfound基本上如果用户输入/ Main / WRONG_LINK，他会转到/ Main / PageOne。如果他不以/ Main开头，他会去NotFound。

有人可以帮我吗？

非常感谢!!!

Answer 1

您缺少此配置

$urlRouterProvider.otherwise('/NotFound');

如果找不到匹配的路线，只需添加此行，然后它会将您重定向到/ NotFound网址

Answer 2

此答案的灵感来自this answer。

首先，您必须使Main状态非抽象，以便可以访问它。然后，您可以编写与您要重定向的位置相关的配置（例如，我已将redirectTo与州一起使用）：

$stateProvider
  .state('Main', {
      redirectTo: "Main.PageOne",
      url: "/Main",
      templateUrl: "/templates/Common/Main.html"
  })
// ... Rest of code

因此，只要将URL更改为/Main，就会激活此状态。第二个配置是为$stateChangeStart事件创建一个监听器，如下所示：

angular
  .module('inspinia')
  .config(config)
  .run(function ($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params, { location: 'replace' })
      }
    });
  });

现在，如果点击/Ma/*这样的网址，系统会自动将其重定向到/NotFound。如果点击了/Main这样的网址，它会重定向到/Main/PageOne。

您可以跟进进一步讨论on this link以进行任何类型的问题排查。

Answer 3

清楚阅读以下陈述

你为什么要用这条线？

when('/Main', '/Main/PageOne')

对于重定向问题，请查看以下状态

.state('Main', {
    abstract: true,
    url: "/Main",
    templateUrl: "/templates/Common/Main.html"
})

abstract：true ==＆gt;这表示这个特定的状态是一个抽象，如果没有它的孩子就永远不会被激活。

消息来源： ui-router js代码。请参阅以下代码段

由于您将此主状态设为抽象，因此您将被重定向到其他状态。

希望这个