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

问题描述

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

I am working on a project in which I have used Angular-UI routing. When I try to refresh web page or enter URL directly, It is redirected to parent state. It does load the state of the URL which I have reloaded but then quickly redirects to parent state. Here is my state routing

$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 状态.如果我在这里刷新页面，在重新加载当前状态后，它会将我重定向到主状态.我想避免这种情况.

Suppose currently I am on home.store.storecontent state. If I refreshed the page here, after reloading current state, It redirects me to the parent state which is home. I want to avoid this.

推荐答案

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

We have two options in general. First is to define url for child, the second is - make parent abstract which will mean that it child is default.

第一种方法有一个工作示例

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

In case we would like to keep parent 'home.store' and child 'home.store.storecontent' non-abstract, we have to define unique url for both of them, e.g.:

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

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

So, now we have two links:

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

并且他们每个人都会在刷新时具有唯一目标.在此处

And each of them will on refresh have unique target. Check it here

第二种方法有一个工作plunker

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

In case, that we want UI-Router to navigate to a child of 'home.store' state, we just have to make it abstract. Then - if there is a child with url: "" - it will be used as a non abstract state to be initiated.

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

These adjustment should do that:

.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"
            }
        }
    })

检查它在这里操作

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

In case, that the 'home.store' should not be abstract, we should give some non empty url to its child - to distinguish these two...

这篇关于Angular UI-Routing，页面刷新时自动重定向到父状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！