Question

我在Angular中编写了一个Web应用程序的一部分。为了确保涵盖所有路由，我想向redirectTo添加$routeProvider属性，以便将无效路由返回到Web应用程序的根目录，该路由器不使用Angular。

我试过了：

$routeProvider.otherwise({
    redirectTo: '/'
});

但很明显，这只会在网址的角度控制部分中路由，因此用户会被重定向到http://app.com/angular-part-of-web-app#之类的网址，而不是http://app.com，我希望他们能够去。{ / p>

我通过将一个空白的部分用作'404'页面，然后是一个仅使用$window对象重定向到所需页面的控制器来解决这个问题：

routes.js

// Redirect to site list.
$routeProvider.when('/404', {
    templateUrl: '/partials/404.html',
    controller: 'RedirectCtrl'
});

// Redirect to the 404 page.
$routeProvider.otherwise({
    redirectTo: '/404'
});

controllers.js

// Controller to redirect users to root page of site.
.controller('RedirectCtrl', ['$scope', '$window', function ($scope, $window) {

    $window.location.href = '/';
}]);

然而，这是掀起'太hacky，必须是更好的方式'的警钟。在Angular中有更好的方法吗？

编辑：Angular routes - redirecting to an external site?没有回答同一个问题。我将打开我的问题，而不是将其标记为重复（现在），因为Angular世界移动得如此之快，之前的答案可能不再是这样。

Answer 1

使用/ 404的上述解决方案对我不起作用。然而，这似乎有效

.otherwise({
    controller : function(){
        window.location.replace('/');
    }, 
    template : "<div></div>"
});

PS。我正在使用Angular 1.2.10

Answer 2

你可以这样做：

$routeProvider.when('/404', {
    controller: ['$location', function($location){
        $location.replace('/');
    }]
}).otherwise({
    redirectTo: '/404'
});

基本上是相同的，只是它使用的代码更少。

Answer 3

不确定接收到的答案是什么版本的Angular JS，但是'redirectTo'属性接受了一个函数。所以，为什么不做这样简单的事情：

$routeProvider.otherwise({
    redirectTo: function() {
        window.location = "/404.html";
    }
});

显然，你必须创建自己的404.html。或者404页面的任何地方。

Answer 4

包括明确答案在内的所有答案都不适用于我。我相信我的解决方案也可以解决您的问题，我也会分享我的用例以供将来读者参考。

使用路径控制器方法的问题： 当加载控制器时，路由已经为我访问了历史API状态（我使用HTML5模式，不确定这是否会影响非HTML5模式）。

因此，即使我可以使用人员转发到正确的页面 window.location.replace（ '/'）;, 如果用户在浏览器上单击“返回”，则会进入无效状态。

场景：我们实施多页模型，并且我的管理页面模块与我的主页（非管理员）模块分开。我在我的一个管理员控制器中有一个$ location.path（'/'），但由于主页未打包到管理页面模块中，我想在检测到'/'路径时强制重页加载。< / p>

<强>解决方案：在ngRoute访问任何状态信息之前，我们必须在$ routeChangeStart处拦截。这样我们甚至可以通过将url传递给$ route

中的redirectTo param来指定外部href

angular.module('app',['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when('/admin/default', {template: somePageTemplate})
  /*
   *  More admin-related routes here...
   */
  .when('/',{redirectTo:'/homepage'})  // <-- We want to intercept this
  .otherwise({redirectTo: '/admin/default'}); 
}])
.controller('MainCtrl',[ // <- Use this controller outside of the ng-view!
  '$rootScope','$window',
  function($rootScope,$window){
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
      // next <- might not be set when first load
      // next.$$route <- might not be set when routed through 'otherwise'
      // You can use regex to match if you have more complexed path...
      if (next && next.$$route && next.$$route.originalPath === '/') {
        // Stops the ngRoute to proceed
        event.preventDefault();
        // We have to do it async so that the route callback 
        // can be cleanly completed first, so $timeout works too
        $rootScope.$evalAsync(function() {
          // next.$$route.redirectTo would equal be '/homepage'
          $window.location.href = next.$$route.redirectTo;
        });
      }
    });
  }
]);

请提供任何反馈，因为我将自己使用此代码。干杯

<强>参考： https://github.com/angular/angular.js/issues/9607

Answer 5

嗨即使已经两年了，只是为了寻找这个答案的人，只需使用window.location.assign（'/ login'）。这对我有用。

使用$ routeProvider重定向到Angular之外的路由

5 个答案: