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 ，第二个是 - make parent abstract，这意味着它的子项是默认的。

第一种方法有a working example

如果我们想保留父母＆＃39; home.store＆＃39;和孩子＆＃39; home.store.storecontent＆＃39;非抽象的，我们必须为它们两者定义唯一的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 导航到＆＃39; home.store＆＃39;的孩子。状态，我们只需要将其设为抽象。然后 - 如果有一个带有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

如果＆＃39; home.store＆＃39; 不应该是抽象的，我们应该为其子项提供一些非空的 url - 以区分这两个......

Answer 2

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

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

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

解决了

Answer 3

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

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

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

3 个答案: