MEAN栈网站实现从页面B无刷新返回页面A并保留状态求助

针对你的需求，核心是要让页面A的控制器实例和视图状态在跳转到B时不被销毁，同时实现A和B之间的数据传递。下面是具体的实现步骤：

1. 调整路由结构，使用父状态+并行视图 #

因为你无法启用html5mode，我们可以通过UI-Router的命名并行视图让A和B的视图共存于父状态中，切换时仅显示/隐藏对应视图，而非销毁重建。

首先更新路由配置：

$stateProvider
  // 父状态，作为A和B的容器
  .state('main', {
    url: '',
    templateUrl: 'main.html',
    controller: 'MainCtrl'
  })
  // 页面A的子状态
  .state('main.A', {
    url: '/A',
    views: {
      'A@main': { // 命名视图，对应main.html中的ui-view="A"
        templateUrl: 'A.html',
        controller: 'ACtrl'
        // 这里的resolve不会在返回时重复执行，因为控制器实例未销毁
      }
    }
  })
  // 页面B的子状态
  .state('main.B', {
    url: '/B',
    views: {
      'B@main': { // 命名视图，对应main.html中的ui-view="B"
        templateUrl: 'B.html',
        controller: 'BCtrl'
      }
    }
  });

然后创建父状态的模板main.html，通过ng-show控制两个视图的显示：

<!-- main.html -->
<div ui-view="A" ng-show="$state.includes('main.A')"></div>
<div ui-view="B" ng-show="$state.includes('main.B')"></div>

注意：需要在MainCtrl中注入$state，让模板能访问到$state对象：

angular.module('yourApp').controller('MainCtrl', function($state) {
  var vm = this;
  vm.$state = $state;
  // 或者直接把$state绑定到$rootScope，方便所有模板访问
});

2. 用共享服务传递A到B的数据 #

因为A和B是不同的控制器，我们需要一个单例服务来存储A页面的输入内容，这样B就能直接读取：

angular.module('yourApp').factory('PageStateService', function() {
  var state = {
    pageAInput: ''
  };

  return {
    getPageAInput: function() {
      return state.pageAInput;
    },
    setPageAInput: function(value) {
      state.pageAInput = value;
    }
  };
});

在ACtrl中注入这个服务，实时保存输入内容：

angular.module('yourApp').controller('ACtrl', function($state, PageStateService) {
  var vm = this;
  // 初始化时读取服务中的值（如果有之前的缓存）
  vm.inputText = PageStateService.getPageAInput();

  // 实时更新服务中的数据
  vm.updateInput = function() {
    PageStateService.setPageAInput(vm.inputText);
  };

  // 跳转到页面B的方法
  vm.goToPageB = function() {
    // 先确保输入已保存
    vm.updateInput();
    $state.go('main.B');
  };
});

对应的A.html模板：

<!-- A.html -->
<textarea ng-model="vm.inputText" ng-change="vm.updateInput()"></textarea>
<button ng-click="vm.goToPageB()">前进到页面B</button>

3. 实现页面B的展示和返回功能 #

在BCtrl中读取共享服务的数据，并实现返回按钮（不重新加载A）：

angular.module('yourApp').controller('BCtrl', function($state, PageStateService) {
  var vm = this;
  // 从服务中获取A页面的输入内容
  vm.displayText = PageStateService.getPageAInput();

  // 返回页面A，使用reload: false确保不重新加载状态
  vm.goBackToPageA = function() {
    $state.go('main.A', {}, { reload: false });
    // 或者直接用history.back()，效果一样
    // $window.history.back();
  };
});

对应的B.html模板：

<!-- B.html -->
<p>{{ vm.displayText }}</p>
<button ng-click="vm.goBackToPageA()">返回页面A</button>

为什么这样能解决问题？ #

• 状态保留：A的视图只是被ng-show隐藏，控制器实例并未被销毁，所以返回时不需要重新执行resolve和控制器初始化，输入的文本会直接保留。
• 数据传递：通过单例服务实现跨控制器的数据共享，避免了URL传参的限制（比如输入内容过长）。
• 兼容hash模式：完全不需要启用html5mode，URL仍然是#/A和#/B的形式，符合你的要求。

额外注意事项 #

• 如果你的ACtrl中有初始化逻辑，确保这些逻辑只在第一次加载时执行（比如放在$onInit中，避免重复执行）。
• 如果你需要在浏览器刷新时也保留A的输入，可以在共享服务中结合localStorage，将输入内容持久化到本地存储。

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