AngularJS中使用ui-view跳转页面时如何隐藏原登录页？

看起来你遇到的核心问题是登录表单和<ui-view>处于同级DOM结构，当你用$state.go跳转时，只有<ui-view>内的内容会被路由替换，而登录表单所在的部分会一直留在页面上。接下来我给你一步步解决这个问题：

问题根源分析 #

你的当前HTML结构中，登录表单直接写在了ng-controller所在的div里，和<ui-view>平级：

<div class="log-w3" ng-app="log" ng-controller="logcontroller">
  <!-- 登录表单内容 -->
  <div class="w3layouts-main">...</div>
  <!-- ui-view容器 -->
  <ui-view></ui-view>
</div>

这种情况下，路由只会更新<ui-view>里的内容，登录表单部分不会被任何路由逻辑控制，所以跳转后它依然显示。

解决方案：重构路由与DOM结构 #

我们需要把登录页也做成一个独立的路由状态，让所有页面（包括登录、首页）都通过路由加载到根级别的<ui-view>中。

1. 调整根HTML结构 #

把原来的登录表单从根节点移走，只保留根ng-app和<ui-view>：

<div ng-app="log">
  <ui-view></ui-view>
</div>

2. 把登录表单转为独立模板 #

将原来的登录表单内容（<div class="w3layouts-main">...</div>这部分）保存为一个单独的HTML模板文件，比如/Login/Index（你可以根据自己的项目路径调整）。

3. 修改路由与控制器配置 #

更新你的AngularJS代码，添加登录状态，同时修正路由跳转的逻辑：

angular.module('log', ['ui.router', 'notification', 'cfp.loadingBar'])
  .config(function ($stateProvider, $urlRouterProvider) {
    // 设置默认路由，未登录时自动跳转到登录页
    $urlRouterProvider.otherwise('/login');

    $stateProvider
      // 登录页状态
      .state('login', {
        url: '/login',
        templateUrl: '/Login/Index', // 指向刚才创建的登录模板
        controller: 'logcontroller'
      })
      // 登录后的首页状态
      .state('welcome', {
        url: '/welcome',
        templateUrl: '/Dash/Index'
      });
  })
  .controller('logcontroller', function ($scope, Notification, $state, $http, cfpLoadingBar) {
    $scope.login = function (log) {
      $http.post("/Login/Info", log).then(function (response) {
        cfpLoadingBar.start();
        if (response.data.success) {
          console.log('Login sucessfull');
          Notification.success(response.data.message);
          // 跳转到welcome状态（注意这里用的是状态名，不是URL）
          $state.go('welcome');
        } else {
          Notification.error(response.data.message);
        }
        cfpLoadingBar.complete();
      }, function () {
        alert("Something went wrong!");
      });
    };
  });

关键修改点说明 #

• 路由状态命名规范：原来的状态名"/Log"不符合常规，推荐用login、welcome这种可读性高的名称，同时URL设置为对应的路径（比如/login、/welcome）。
• 根ui-view接管所有页面：现在所有页面都通过路由加载到根<ui-view>中，登录成功后跳转新状态时，旧的登录模板会被完全替换，自然就隐藏了。
• 默认路由跳转：通过$urlRouterProvider.otherwise('/login')确保用户打开应用时默认进入登录页。

这样调整后，你登录成功跳转到首页时，登录页就会被完全替换掉，不会再显示在页面上了。

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