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

Question

我正在开发一个使用 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。我想避免这种情况。

Answer 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”状态的子级，我们只需将其设为抽象即可。然后 - 如果有 子 其 url: "" - 它将被用作要启动的非抽象状态。

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

.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 - 来区分这两个...