AngularJS跳转如何实现页面路由与参数传递？

AngularJS 作为一款经典的前端框架，其路由机制（ngRoute 模块）和页面跳转逻辑是构建单页应用（SPA）的核心能力，本文将围绕 AngularJS 的页面跳转展开，从基础配置到高级实践，详细解析其实现原理与最佳实践，帮助开发者构建结构清晰、体验流畅的前端应用。

AngularJS 路由基础：ngRoute 模块详解

AngularJS 的页面跳转依赖 ngRoute 模块，该模块提供了基于路由的视图切换功能，通过 URL 变化映射到不同的模板和控制器，首先需要引入 angular-route.js 文件，并在应用中注入 ngRoute 依赖：

var app = angular.module('myApp', ['ngRoute']);

路由配置：$routeProvider 的使用

$routeProvider 是 ngRoute 模块的核心服务，用于定义路由规则，通过 when() 方法配置具体路由，otherwise() 方法定义默认路由，每个路由规则可包含以下关键属性：

示例配置如下：

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'views/home.html',
            controller: 'HomeController as homeCtrl'
        })
        .when('/user/:id', {
            templateUrl: 'views/user.html',
            controller: 'UserController as userCtrl',
            resolve: {
                userData: function($http, $route) {
                    return $http.get('/api/user/' + $route.current.params.id);
                }
            }
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

视图容器：<ng-view> 指令

<ng-view> 是 ngRoute 提供的视图容器指令，用于渲染匹配到的模板，当 URL 变化时，ngRoute 会自动加载对应模板并插入 <ng-view> 中，可通过 CSS 为其添加样式，

ng-view {
    transition: all 0.5s ease-in-out;
}

若需多个视图容器（如嵌套路由），可使用 <ng-view> 的 name 属性，或结合 ui-router 等第三方路由模块实现更复杂的布局。

页面跳转的多种实现方式

AngularJS 中页面跳转可通过以下方式实现，不同场景适用于不同方法：

声明式跳转：<a> 标签与 ng-link 指令

使用 <a> 标签并添加 ng-link 指令（或直接使用 href 配合 ），是 AngularJS 最基础的跳转方式：

<!-- 推荐：ng-link 指令 -->
<a ng-link="/home">首页</a>
<!-- 兼容传统方式：href + # -->
<a href="#/user/123">用户详情</a>

ng-link 会自动阻止默认跳转行为，通过 AngularJS 路由机制切换视图，避免页面刷新。

编程式跳转：$location 服务

在控制器中,可通过 $location 服务实现代码层面的跳转，适用于动态路由或条件跳转场景：

app.controller('NavController', ['$location', function($location) {
    this.goToHome = function() {
        $location.path('/home'); // 修改 URL 并触发路由切换
    };
    this.replaceUrl = function() {
        $location.path('/user/123').replace(); // 替换当前历史记录
    };
}]);

$location 提供了多种方法控制 URL：

• $location.path()：修改路径部分（如 /home）
• $location.search()：操作查询参数（如 ?name=John）
• $location.hash()：操作哈希值（如 #section1）

事件驱动跳转：$routeChange 事件

路由切换过程中会触发多个事件,可通过 $rootScope 监听这些事件实现逻辑控制：

app.run(['$rootScope', '$location', function($rootScope, $location) {
    $rootScope.$on('$routeChangeStart', function(event, next, current) {
        console.log('路由开始切换:', next.originalPath);
        // 示例：权限校验
        if (next.requiresAuth && !isAuthenticated()) {
            $location.path('/login');
        }
    });
    $rootScope.$on('$routeChangeSuccess', function(event, next, current) {
        console.log('路由切换成功:', next.originalPath);
    });
}]);

高级实践：优化路由体验

路由懒加载：按需加载模板与控制器

对于大型应用,可将路由对应的模板和控制器拆分为独立模块，通过 $ocLazyLoad 等插件实现懒加载，减少初始加载时间：

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/lazy', {
        templateUrl: 'views/lazy.html',
        controller: 'LazyController',
        resolve: {
            loadModule: function($q, $rootScope) {
                var deferred = $q.defer();
                require(['controllers/lazyController'], function() {
                    deferred.resolve();
                    $rootScope.$apply();
                });
                return deferred.promise;
            }
        }
    });
}]);

路由参数传递与解析

路由参数可通过 param 方式定义（如 /user/:id），在控制器中通过 $routeParams 服务获取：

app.controller('UserController', ['$routeParams', function($routeParams) {
    this.userId = $routeParams.id; // 获取 URL 中的 id 参数
}]);

对于复杂参数传递,可通过 resolve 预加载数据，或使用 $location.search() 传递查询参数。

路由守卫：权限控制与数据校验

通过 $routeChangeStart 事件可实现路由守卫，

$rootScope.$on('$routeChangeStart', function(event, next, current) {
    if (next.requiresAuth && !localStorage.getItem('token')) {
        event.preventDefault(); // 阻止路由切换
        $location.path('/login');
    }
});

常见问题与解决方案

路由不生效的排查方向

• 检查 ngRoute 模块是否正确注入
• 确认 <ng-view> 指令是否存在于模板中
• 检查路由路径是否正确（如 /home 与 /home/ 的区别）

页面刷新后路由失效

AngularJS 路由基于 HTML5 History API 或哈希模式，若刷新后路由失效，需确保服务器配置支持 HTML5 History（如 Nginx 配置 try_files），或强制使用哈希模式：

app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.hashPrefix('!'); // 启用哈希模式，如 /#!/home
}]);

路由切换时的动画效果

通过 CSS 结合 ng-view 的动画类可实现过渡效果：

.ng-view-enter, .ng-view-leave {
    position: absolute;
    left: 0;
    right: 0;
    transition: opacity 0.5s;
}
.ng-view-enter {
    opacity: 0;
}
.ng-view-enter-active {
    opacity: 1;
}
.ng-view-leave {
    opacity: 1;
}
.ng-view-leave-active {
    opacity: 0;
}

AngularJS 的路由机制为单页应用提供了灵活的页面跳转解决方案，通过 ngRoute 模块的基础配置、多种跳转方式以及高级优化技巧，开发者可以构建出结构清晰、用户体验优秀的前端应用，在实际开发中，需结合项目需求选择合适的路由策略，注意性能优化与错误处理，确保应用的稳定性和可维护性。