Angularjs路由否则会导致404

Question

我有一个单页应用程序，我根据 url 地址路由到不同的页面，当用户在 url 中输入不存在的页面时，我想重定向到主页，所以我使用 else 语句，但是它会导致 404 错误，在这里是我的路由配置。：

myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.
        when('/', {
            redirectTo: '/products'        
        }).
        when('/products/:id?', {
            templateUrl: 'partials/products.html',
            controller: 'ProductsController'
        }).
        when('/orders/:id?', {
            templateUrl: 'partials/orders.html',
            controller: 'OrdersController'
        }).
        when('/auto', {
            templateUrl: 'partials/AutoComplete.html',
            controller: 'TypeaheadCtrl'
        }).
        otherwise({ redirectTo: '/' });

    $locationProvider.html5Mode(true);
}]);

编辑：

按照下面的建议进行了更改，但效果相同，当我键入不存在的页面时，它会转到错误 404 而不是 /products

myApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.
        when('/', {
            redirectTo: '/products'        
        }).
        when('/products', {
            templateUrl: 'partials/products.html',
            controller: 'ProductsController'
        }).
        when('/products/:id?', {
            templateUrl: 'partials/products.html',
            controller: 'ProductsController'
        }).
        when('/orders/:id?', {
            templateUrl: 'partials/orders.html',
            controller: 'OrdersController'
        }).
        when('/auto', {
            templateUrl: 'partials/AutoComplete.html',
            controller: 'TypeaheadCtrl'
        }).
        otherwise({ redirectTo: function () { return '/' } });

    $locationProvider.html5Mode(true);
}]);

Answer 1

您不需要when('/'... 和其他，因为它们基本上做同样的事情。 否则是获取任何不匹配的内容的包罗万象，因此您无需专门路由“/”。

$routeProvider.
  when('/products/:id?', ...).
  when('/orders/:id?', ...).
  when('/auto', ...).
  otherwise({
    redirectTo: '/products'
  });

编辑问题是重定向到“/products”与“/products/:id”不匹配。您需要添加另一条路线，如下所示：

when('/products', {
    templateUrl: 'partials/products.html',
    controller: 'ProductsController'
})