AngularJS路由问题：无法按需求修改URL与加载对应页面

嘿，我明白你现在卡在哪了——在AngularJS里配置路由时，URL路径和页面跳转完全没按预期来，尤其是Plunker环境下的路径匹配问题。咱们一步步捋清楚怎么解决：

1. 修正核心路由配置规则 #

你需要在app.config里明确映射路由与页面的对应关系，同时设置默认路由重定向到登录页，还要处理登录后的跳转逻辑。这里是完整的配置示例，你可以直接参考调整：

(function(){
  var app = angular.module('mainApp', ["ngRoute"]);

  app.config(function($routeProvider, $locationProvider) {
    // 启用HTML5模式，去掉URL里的#号（Plunker环境下支持这个模式）
    $locationProvider.html5Mode(true).hashPrefix('!');

    $routeProvider
      // 登录页路由配置
      .when('/loginPage', {
        templateUrl: 'loginPage.html', // 确保这个文件名和你实际的登录页一致
        controller: 'LoginController' // 对应登录页的控制器（如果有的话）
      })
      // 仪表盘路由配置
      .when('/Dashboard', {
        templateUrl: 'dashboard.html',
        controller: 'DashboardController',
        resolve: {
          // 可选：添加登录校验，未登录用户直接跳回登录页
          auth: function($location, AuthService) {
            if (!AuthService.isLoggedIn()) {
              $location.path('/loginPage');
              return false;
            }
            return true;
          }
        }
      })
      // 默认路由：访问根路径时自动重定向到登录页
      .otherwise({
        redirectTo: '/loginPage'
      });
  });

  // 示例登录控制器，处理登录逻辑和跳转
  app.controller('LoginController', function($scope, $location, AuthService) {
    $scope.login = function() {
      // 这里写你的登录验证逻辑（比如用户名密码校验）
      AuthService.setLoggedIn(true);
      // 登录成功后跳转到Dashboard页面
      $location.path('/Dashboard');
    };
  });

  // 示例认证服务，用于存储登录状态
  app.service('AuthService', function() {
    var isLoggedIn = false;
    return {
      isLoggedIn: function() { return isLoggedIn; },
      setLoggedIn: function(status) { isLoggedIn = status; }
    };
  });

})();

2. 处理Plunker的路径基准问题 #

因为Plunker的项目是运行在专属子路径下（比如你提到的run.plnkr.co/VqxyVuraDTBrBUbZ/），所以必须在你的index.html头部添加<base>标签，确保AngularJS能正确解析路由路径：

<head>
  <!-- 先引入AngularJS和ngRoute依赖 -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
  
  <!-- 设置base href为当前Plunker项目的根路径 -->
  <base href="/VqxyVuraDTBrBUbZ/">
  <!-- 注意：这里的VqxyVuraDTBrBUbZ是你当前Plunker的项目ID，要替换成自己的 -->
</head>

3. 最终效果验证 #

• 打开Plunker项目时，会自动跳转到run.plnkr.co/VqxyVuraDTBrBUbZ/loginPage，加载你的登录页面
• 登录成功后，URL会变成run.plnkr.co/VqxyVuraDTBrBUbZ/Dashboard，并正确加载dashboard.html

另外提一句：如果想把URL改成run.plnkr.co/loginPage这种不带项目ID的形式，这是Plunker平台的限制——每个项目都有唯一的ID路径，没法直接修改，除非你把项目部署到自己的独立服务器上。

内容的提问来源于stack exchange，提问作者Rahul