Angular UI-Routing，页面刷新时自动重定向到父状态答案

【问题标题】：Angular UI-Routing, Page automatically redirects to parent state when refreshedAngular UI-Routing，页面刷新时自动重定向到父状态
【发布时间】：2015-05-07 12:54:29
【问题描述】：

我正在开发一个使用 Angular-UI 路由的项目。当我尝试刷新网页或直接输入 URL 时，它被重定向到父状态。它确实会加载我重新加载的 URL 的状态，但随后会快速重定向到父状态。这是我的状态路由

$stateProvider
    .state('home', {
        url: "",
        views: {
            "home": {
                templateUrl: root_url + "home"
                },
            },
        })
    .state('home.store', {
        url: "/store",
        views: {
            "store": {
                templateUrl: root_url + "store"
                },
            },
        })
    .state('home.store.storecontent', {
        views: {
            "storecontent": {
                templateUrl: root_url + "storecontent"
                }
            }
        })

假设我目前处于 home.store.storecontent 状态。如果我在这里刷新页面，在重新加载当前状态后，它会将我重定向到父状态，即主页。我想避免这种情况。

【问题讨论】：

可以添加一个网址到home.store.storecontent吗？
我在发布问题之前尝试了同样的方法。不幸的是，它不起作用。
没有 URL，您无法刷新状态。我还将您的“主页”网址更改为“/”

标签： angularjs angular-ui-router

【解决方案1】：

我们一般有两种选择。首先是为孩子定义 url，第二个是 - 使父抽象，这意味着它是默认的。

第一种方法有a working example

如果我们想让父 'home.store' 和子 'home.store.storecontent' 保持非抽象，我们必须为它们定义唯一的 url，例如：

.state('home.store', {
    url: "/store",
    ...
    })
.state('home.store.storecontent', {
    url: "/content",
    ...
    })

所以，现在我们有两个链接：

<a href="#/store">
<a href="#/store/content">

并且他们每个人都会在刷新时拥有唯一的目标。检查它here

第二种方法有a working plunker

如果我们希望 UI-Router 导航到 'home.store' 状态的子节点，我们只需将其设为 abstract。然后 - 如果有一个带有url: "" 的 child - 它将被用作要启动的非抽象状态。

这些调整应该做到这一点：

.state('home.store', {
    url: "/store",
    // here, we make home.store to be abstract
    abstract: true,
    views: {
        "store": {
            templateUrl: root_url + "store"
            },
        },
    })
.state('home.store.storecontent', {
    // here, we say, that instead of parent (which url is selected)
    // this child state should be initiated
    url: "",
    views: {
        "storecontent": {
            templateUrl: root_url + "storecontent"
            }
        }
    })

查看here in action

如果 'home.store' 不应该是抽象的，我们应该给它的孩子一些非空的 url - 以区分这两个......

【讨论】：

我不想让 home.store 抽象。当我刷新一些包含子状态的页面时，我想避免重定向到父状态。
问题是，那个孩子没有定义 URL。这意味着，如果您刷新 - 浏览器将从头开始。它必须初始化 UI-Router，传递 URL。 UI-Router 会发现.. ahaaa... 它是#/store... 它的意思是 'home.store' - 并将初始化它。因此，正如我指出的那样，您有两个选择 1) 使父抽象 - 将直接选择子 2) 为子定义唯一 url...
我扩展了我的答案并展示了这两种方法。希望它有所帮助 ;) 享受 UI-Router
我为每个州定义了唯一的 URL。仍然无法正常工作。当我将根状态（即主页）定义为抽象时，主页本身不会被加载。当我查看网络调用时，所有的 AJAX 调用和当前状态的 HTML 模板都已加载。在此之后，页面被重定向到父状态。
看，我尽了最大的努力，为你创造了几个 WORKING plunkers。他们确实遵循您的解决方案并且确实有效。我建议..比较它们。尝试将它们更改为您的.. 它会揭示什么是错误的...希望这会有所帮助

【解决方案2】：

您是否使用带有 ui-sref 和 md-active 的 md-tabs？

如果你是，问题是 md-active 触发点击选项卡，然后你被重定向到父状态。

我遇到了这个问题，现在用https://github.com/angular/material/issues/5351解决了

【讨论】：

【解决方案3】：

在每个状态更改成功事件中，您需要在 localStorage 中缓存或存储当前状态名称，当您刷新时，如果登录有效，则可以从中加载。

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {//You can save your storing state name function here}

【讨论】：