Angular UI路由,刷新后页面自动重定向到父状态 [英] Angular UI-Routing, Page automatically redirects to parent state when refreshed
问题描述
我正在一个使用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状态.如果我在这里刷新页面,则在重载当前状态后,它将重定向到父状态(即home).我想避免这种情况.
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"抽象,则必须为它们两者定义唯一的网址,例如:
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">
每个人都会刷新唯一目标.在此处
对于第二种方法,有工作的矮人
如果要让 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路由,刷新后页面自动重定向到父状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!