AngularJS中ui-view重复渲染主模板及URL异常问题求助

嘿，我来帮你搞定这两个困扰你的AngularJS路由问题！咱们一个一个来分析：

一、ui-view主模板渲染两次的问题 #

这种情况通常有几个常见原因，你可以对照排查：

• 重复引入脚本：检查你的index.html里是不是重复引入了angular.js或者angular-ui-router.js，重复加载框架会导致路由逻辑被触发两次。
• ui-view标签重复：看看你的index.html里是不是不小心写了两个<ui-view></ui-view>标签，每个ui-view都会渲染匹配的模板，重复标签自然会导致模板渲染两次。
• 路由配置重复匹配：检查你的app.js路由配置，有没有两个状态同时匹配当前URL？比如默认状态（''或者'/'）和另一个状态的URL规则重叠，导致两个状态都触发渲染。

举个反例，如果你的路由里有这样的配置，就会触发重复渲染：

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('default', {
    url: '',
    templateUrl: 'home.html'
  });

删掉其中一个重叠的状态配置就能解决问题。

二、路由状态含斜杠导致URL双斜杠、路由失效的问题 #

这个问题的核心是ui-router的状态名称里的斜杠和URL配置的斜杠叠加了。

比如你可能在app.js里写了这样的状态：

$stateProvider
  .state('app/home', {
    url: '/home',
    templateUrl: 'home.html'
  });

这里状态名用了app/home，ui-router会把状态名里的斜杠当成URL的一部分，再加上你配置的url: '/home'，最终URL就会变成//home，自然会导致路由失效。

解决方法很简单：

• 状态名改用点分隔的命名空间，而不是斜杠：

  $stateProvider
    .state('app.home', {
      url: '/home',
      templateUrl: 'home.html'
    });
  

• 如果是嵌套路由，父状态的URL已经包含斜杠，子状态的URL要注意拼接逻辑：

  $stateProvider
    .state('app', {
      url: '/app',
      templateUrl: 'app.html'
    })
    .state('app.home', {
      url: '/home', // 和父状态的/app拼接后是/app/home
      templateUrl: 'home.html'
    });
  

你的index.html代码整理： #

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content...>
  <!-- 请检查这里是否重复引入了AngularJS或ui-router脚本 -->
</head>
<body ng-app="myApp">
  <!-- 检查这里是否存在多个ui-view标签 -->
  <ui-view></ui-view>
</body>
</html>

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