angularjs路由多个路由

Posted 2021-04-25

我有一个关于AngularJS路由的快速问题。我们知道我们可以按如下方式进行路由：

$routeProvider
        .when('/dashboard', {
            templateUrl : 'dashboard.htm',
            title       : 'Dashboard'
        })
        .when('/settings', {
            templateUrl : 'settings.htm',
            title       : 'Settings'
        })
        .otherwise({
            templateUrl : 'error-page.htm',
            title       : 'Page Not Found'
        });

在这里，我需要为单个templateURL做多个路由，我想要如下所示：

  $routeProvider
        .when('/dashboard || /', { /* Here doing OR for "/dashboard" and "/" */
            templateUrl : 'dashboard.htm',
            title       : 'Dashboard'
        })
        .when('/settings', {
            templateUrl : 'settings.htm',
            title       : 'Settings'
        })
        .otherwise({
            templateUrl : 'error-page.htm',
            title       : 'Page Not Found'
        });

在AngularJS路由中有没有办法做到这一点？我不想再做一个。当第二部分时。

答案

我认为这会奏效：

  $routeProvider
        .when('/', {
            redirectTo : '/dashboard'
        })
        .when('/dashboard', {
            templateUrl : 'dashboard.htm',
            title       : 'Dashboard'
        })
        .when('/settings', {
            templateUrl : 'settings.htm',
            title       : 'Settings'
        })
        .otherwise({
            templateUrl : 'error-page.htm',
            title       : 'Page Not Found'
        });

编辑添加源代码。从angular-route.js开始，pathName只是用来在表中查找，所以你不能做一个或者。

  this.when = function(path, route) {

    routes[path] = angular.extend(
      {reloadOnSearch: true},
      route,
      path && pathRegExp(path, route)
    );
    // create redirection for trailing slashes
    if (path) {
      var redirectPath = (path[path.length-1] == '/')
            ? path.substr(0, path.length-1)
            : path +'/';
      routes[redirectPath] = angular.extend(
        {redirectTo: path},
        pathRegExp(redirectPath, route)
      );
    }
    return this;
  };

你可以分叉角度并做这样的事情：

this.when = function(paths, route) {
    if ( !angular.isArray(paths) )
        paths = [path];

    for (var i=0; i<paths; i++ ) {
        var path = paths[i];
        routes[path] = angular.extend(
          {reloadOnSearch: true},
          route,
          path && pathRegExp(path, route)
        );
        // create redirection for trailing slashes
        if (path) {
            var redirectPath = (path[path.length-1] == '/')
                ? path.substr(0, path.length-1)
                : path +'/';
            routes[redirectPath] = angular.extend(
                {redirectTo: path},
                pathRegExp(redirectPath, route)
            );
        }
    }
    return this;
};

然后你可以这样做：

  $routeProvider
        .when(['/dashboard', '/'], {
            templateUrl : 'dashboard.htm',
            title       : 'Dashboard'
        })

另一答案

您可以制作如下的动态路由器。

 $routeProvider
            .when('/:page', {
                templateUrl : function($routeParams){
                   return $routeParams.page+".html";
                }
            })
            .otherwise({
                templateUrl : 'error-page.htm'
            });

另一答案

对于多路由使用状态路由器而不是ng路由器。如果你想做多个路由，这就是一个例子。

// Define a top-level state:
$stateProvider.state('users', {
  url: '/users',
  templateUrl: 'views/users.html'
});

// Define a child state for 'users':
$stateProvider.state('users.new', {
  url: '/new',
  templateUrl: 'views/users.new.html'
});