Angular：如何同时处理 HTML5 模式路由和哈希路由？答案

【问题标题】：Angular: how to handle both HTML5 mode routes and hash routes?Angular：如何同时处理 HTML5 模式路由和哈希路由？
【发布时间】：2016-11-15 14:28:36
【问题描述】：

我一直在使用 Angular 1 中的“标准”路由，这些路由使用 # 符号（例如 /app#/home）。现在我想切换到 HTML5 模式以获得漂亮的 URL（例如：/app/home）。

我已经用$locationProvider.html5Mode(true) 切换了 HTML5 模式，一切正常。

但是，我们的一些用户可能仍然在电子邮件中拥有旧 URL 格式的书签和链接，并且这些会损坏。我希望旧 URL 仍然有效（让 /app#/home 自动重定向到 /app/home）。

我尝试过使用默认路由来查看哈希，如下所示：

$routeProvider
    .when({ ... })
    .otherwise({
        'controller': function($location) {
            var hash = $location.hash();
            // At this point the hash is undefined (even when there is one in the URL)
            console.log('hash = ' + hash);
//            if (hash && hash.indexOf('/') == 0) {
//                $location.path(hash);
//            } else {
//                $location.path('/home')
//            }
        }
    });

不幸的是，这不起作用（控制器看不到哈希，Angular 似乎进入了无限摘要循环）。

你知道如何实现吗？

【问题讨论】：

更好的解决方案是检查位置是否包含'#'。如果是，则将其删除并重定向到它。
else 子句有什么原因吗？如果没有哈希，你不是已经到了你想去的地方吗？
实际上我什至根本无法获得哈希值。更新了问题以反映这一点。
你为什么还要这样做？ Html5Mode 自动回退，适用于不支持它的浏览器。你根本不需要做任何事情来继续使用哈希路由。

标签： javascript angularjs html

【解决方案1】：

使用 $routeChangeStart ：

 angular.module('routing', ['ngRoute'])
       .run(['$rootScope', '$location', '$window', function($rootScope, $location, $window) {
          $rootScope.$on("$routeChangeStart", 
            (event, current, previous, rejection) => {
              if (/#\//.test($window.location.hash)) {
                 $location.path($window.location.hash.replace('#', ''));
              }
          });

...

【讨论】：

我尝试了您的解决方案，但不知何故，$routeChangeError 没有被触发，代码也没有运行。我还尝试将相同的代码与 $routeChangeStart 事件一起使用：代码运行但 $location.url() 返回未定义。
我能够调整您的代码以使其正常工作。新代码是： $rootScope.$on('$routeChangeStart', function(event, next) { if (/#/.test($window.location.hash)) { $location.path($window.location.hash .replace('#', '')); } } 如果您更新您的答案，我会将其标记为已接受。感谢您的指点！
实际上正则表达式只匹配以#/开头的哈希应该是/#\//.test($window.location.hash)
我在睡觉，我会用您的更改更新答案，以便有人发现它有用
代码必须在 $routeChangeStart 而不是 $routeChangeError 上运行。请参阅我之前评论中的代码。