Ionic Angular 1升级包后ion-tab的ui-sref出现URL乱码问题

这种URL重复前缀的问题我之前在升级Ionic和UI-Router依赖时也遇到过，大概率是版本升级后的路由配置冲突导致的，具体原因和解决方案如下：

问题根源 #

升级后出现/#!/!/contacts这种路径，本质是hashbang前缀（!）被重复添加了两次。通常有两种触发场景：

• 你的代码中手动配置了$locationProvider.hashPrefix('!')，而升级后的Ionic/UI-Router版本已经默认启用了hashbang模式，导致前缀叠加；
• 路由状态的URL配置中，子状态的路径包含了重复的!/前缀，和框架自动添加的前缀冲突。

具体解决方案 #

1. 检查并移除重复的hashPrefix配置 #

打开你的路由配置文件，找到类似下面的代码：

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  // 这行代码在新版本中可能是多余的！
  $locationProvider.hashPrefix('!');
  
  // ... 其他路由配置
});

如果你的Ionic版本升级到了1.3+，或者UI-Router升级到了1.x版本，框架已经默认将hashPrefix设置为!，手动重复设置就会导致双重前缀。直接移除这行代码，然后重新测试导航。

2. 修正路由状态的URL配置 #

检查你的tab子状态的URL是否包含了多余的!/前缀。比如原来的配置可能是：

.state('tab.contacts', {
  url: '/#!/contacts', // 这里的`!/`是多余的
  views: {
    'tab-contacts': {
      templateUrl: 'templates/tab-contacts.html'
    }
  }
})

将子状态的URL改成相对路径，去掉!/前缀：

.state('tab.contacts', {
  url: '/contacts', // 只保留相对路径
  views: {
    'tab-contacts': {
      templateUrl: 'templates/tab-contacts.html'
    }
  }
})

同时确保抽象状态tab的URL是干净的相对路径，比如：

.state('tab', {
  url: '', // 或者 '/tab'，根据你的路由结构调整
  abstract: true,
  templateUrl: 'templates/tabs.html'
})

3. 验证UI-Router与Ionic版本兼容性 #

如果上面的方法无效，确认一下你升级的依赖版本是否兼容：

• Ionic 1.x最好搭配UI-Router 0.2.x版本；如果升级到UI-Router 1.x，需要调整路由配置的写法（比如views的定义方式有所变化）；
• 确保依赖版本匹配，避免跨版本的兼容性问题。

测试验证 #

修改完成后，重新启动应用：

• 访问/#!/messages，点击Contacts标签页，应该能正常跳转到/#!/contacts；
• 如果还是有问题，可以打开浏览器控制台，查看UI-Router生成的状态路径，排查是否还有其他配置冲突。

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