防止页面重新加载状态答案

【问题标题】：Preventing state from page reload防止页面重新加载状态
【发布时间】：2018-01-03 01:08:31
【问题描述】：

如果使用 AngularJs 1.6 和启用 Html5 模式的 UI-Router 从窗口重新加载/F5 键打开应用程序，我如何防止加载某些状态。

我的 UI-Router 配置的一部分：

.state("recordform", {
            url: "/form/:formid/:recordid",
            templateUrl: "Form.html",
        })
        .state("modalform", {
            parent: "RecordForm",
            url: "/modalform/:modalformid/:modalrecordid",
            templateUrl: "ModalForm.html"
        })

如果通过在浏览器中粘贴链接或 F5 打开页面，我需要防止加载“modalform”状态。

“modalform”状态在我不想在页面重新加载时打开的模式窗口中打开。刷新事件结束后应该可以手动访问状态。

如果 url 中有特定字符串，我尝试检查“root”状态，但 root 似乎不知道其他状态，但他自己。

如果状态是从 F5 打开的，我也可以检查“modalform”控制器，但我不知道该怎么做。

【问题讨论】：

检查这个答案会有所帮助：stackoverflow.com/questions/5004978/…
我认为“performance.navigation.type”属性会使其在刷新后无法手动达到“modalform”状态。我只想在重新加载事件中丢弃状态。之后状态应该可以访问了。

标签： angularjs angular-ui-router

【解决方案1】：

你可以监听状态改变事件（或者在新版本的 UI 路由器中实现一个转换钩子），并检查之前的状态是否存在。

这个想法是，如果一个状态被页面刷新或 URL 粘贴访问，那么之前的状态将不存在。

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options) {
  if (!fromState && toState.name === 'modalform') {
    event.preventDefault(); // Prevent access to the state

    // optionally redirect to other state if required
    $state.go("your_default_state");
  }
})

并且，如果从任何其他状态导航，modalform 状态将可以访问，因为那时，toState 将存在。

【讨论】：