AngularJS中ngRoute无哈希前缀配置及页面不加载问题排查

一、为什么点击按钮后london.html没加载？ #

我帮你梳理几个常见的排查点，按顺序检查大概率能解决问题：

• 1. 确认ngRoute依赖是否正确引入和注入
  首先要确保你在HTML里引入了与AngularJS主文件版本一致的angular-route.js，比如：

  <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>
  

  然后在你的Angular模块里必须注入ngRoute，这是最容易遗漏的关键步骤：

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

• 2. 检查ng-view指令是否存在
  AngularJS的路由模板是通过ng-view指令渲染到页面上的，你必须在index.html里添加这个标签，比如放在登录表单下方或合适的位置：

  <div ng-view></div>
  

  没有这个标签的话，就算路由配置正确，模板也没地方显示。

• 3. 确认路由的templateUrl路径是否正确
  既然london.html和index.html在public目录同级，路由配置里的路径应该是'london.html'，要注意拼写和大小写（Linux/macOS环境下文件名区分大小写），比如：

  $routeProvider
    .when('/london', {
      templateUrl: 'london.html',
      // 如果对应有控制器，也要正确指定controller: 'LondonCtrl'
    });
  

  可以打开浏览器控制台的网络面板，查看是否有london.html的404请求，要是有就说明路径写错了。

• 4. 按钮的路由触发方式是否正确
  建议用Angular原生方式触发路由，避免手动修改window.location导致页面刷新，比如：
  用控制器+$location服务：

  <button ng-click="goToLondon()">跳转至伦敦页面</button>
  

  app.controller('MainCtrl', function($location) {
    this.goToLondon = function() {
      $location.path('/london');
    };
  });
  

  或者直接用ng-href链接：

  <a ng-href="#/london">跳转至伦敦页面</a>
  

二、如何实现无哈希字符的路由？ #

AngularJS支持HTML5模式路由来去掉URL中的#，但需要完成以下三步配置：

1. 修改Angular路由配置
   在路由配置中启用html5Mode，同时可以移除之前的hashPrefix设置（因为HTML5模式下哈希不再生效）：

   app.config(function($routeProvider, $locationProvider) {
     $locationProvider.html5Mode(true);
     // 可删除之前的 $locationProvider.hashPrefix('');
   
     $routeProvider
       .when('/test', { /* 你的路由配置 */ })
       .when('/london', { templateUrl: 'london.html' })
       .otherwise({ redirectTo: '/' });
   });
   

2. 添加<base>标签到HTML头部
   必须在index.html的<head>中添加<base>标签，指定应用的根路径，否则HTML5模式会出现路径解析错误：

   <head>
     <base href="/">
     <!-- 其他meta、link标签 -->
   </head>
   

3. 服务器端配置（关键！）
   当用户直接访问http://localhost:3000/london时，服务器会默认寻找london.html文件，但该文件不存在（所有路由由Angular处理），所以需要服务器将所有路由请求转发到index.html。
   如果你用Express作为服务器，添加以下代码：

   const path = require('path');
   // 先配置静态文件服务
   app.use(express.static(path.join(__dirname, 'public')));
   // 转发所有路由请求到index.html
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, 'public', 'index.html'));
   });
   

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