如何解决使用bit.ly短链接时的AngularJS路由错误

嘿，我之前帮同事处理过几乎一模一样的情况，咱们来拆解下问题根源和解决办法：

你的URL用的是AngularJS默认的哈希模式路由，也就是#后面的部分是前端路由的内容，但Bit.ly这类短链服务有时候会把#后面的内容当成网页锚点，处理时不小心截断了哈希后的完整路径。下面是几个经过验证的可行方案：

• 切换到HTML5模式（推荐长期方案）
  AngularJS的$locationProvider支持HTML5模式，能把URL改成不带#的格式，比如https://myurl/prices/data?id=1，这样短链服务就不会把路由部分当成锚点忽略了。配置代码很简单：

  angular.module('yourApp', ['ui.router'])
    .config(['$locationProvider', function($locationProvider) {
      // 开启HTML5模式
      $locationProvider.html5Mode(true);
      // 清空哈希前缀（避免出现#!这种格式）
      $locationProvider.hashPrefix('');
    }]);
  

  注意：这个方案需要服务器端配合，所有前端路由都要指向你的index.html，不然用户刷新页面会出现404。比如Nginx要加重写规则，Apache要配置.htaccess，具体规则可以根据你的服务器环境调整。

• 提前编码哈希部分再生成短链
  在给Bit.ly提交URL之前，把#编码成%23，这样短链服务会完整保留整个URL的所有部分。你可以手动处理，或者用AngularJS的$location服务生成编码后的URL：

  // 获取当前完整URL
  var originalUrl = $location.absUrl();
  // 把#替换成URL编码后的%23
  var encodedUrl = originalUrl.replace('#', '%23');
  // 用encodedUrl去生成Bit.ly短链
  

  用户点击短链时，浏览器会自动把%23解码回#，AngularJS就能正常识别路由和参数了。

• 检查Bit.ly的短链生成设置
  有些短链服务会默认“优化”锚点内容，你可以登录Bit.ly后台看看有没有保留完整哈希路径的设置。另外，尽量用Bit.ly的API生成短链，而不是手动粘贴URL——API生成的短链通常会更精准地保留原始URL的所有细节。

• 临时 workaround：把查询参数改成路由路径
  如果上面的方案暂时没法快速落地，你可以把查询参数整合到路由路径里，比如把#/data?id=1改成#/data/1，然后在ui-router里配置动态路由：

  $stateProvider.state('data', {
    url: '/data/:id',
    templateUrl: 'views/data.html',
    controller: 'DataController'
  });
  

  这种结构的URL，短链服务一般不会丢失后面的/1，因为它属于哈希路径的一部分，而不是独立的查询参数。

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