对于下面的代码,当我从“/login”页面转到“/quiz”页面时,状态会随着内容而变化,但 URL 不会改变。我还注意到,当我从“/login”页面转到“/newsfeed”页面时,URL 和状态都会发生变化。为什么会发生这种情况,我需要 URL 随状态而变化。
X.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', '$locationProvider',
function($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('app', {
template: '<div ui-view=""></diiv>'
})
.state('app.login', {
templateUrl: '../views/login/login.html',
controller:'LoginController'
})
.state('app.login.main', {
url: '/login',
templateUrl: '../views/login/login-main.html',
controller: 'LoginController'
})
.state('app.login.quiz_list', {
templateUrl: '../views/quiz/quiz_list.html',
controller: 'QuizListController',
url: '/quiz'
})
.state('app.front', {
templateUrl: '../views/user_utility/app.html',
controller: 'HeaderController'
})
.state('app.front.newsfeed', {
url: '/newsfeed',
templateUrl: '../views/user_utility/newsfeed.html',
controller: 'UserFeedController'
});
$httpProvider.interceptors.push('AuthInterceptor');
$httpProvider.defaults.useXDomain = true;
}
])
最佳答案
发生这种情况是因为 logn.main 和 login.quiz_list 的父状态具有相同的父状态。这就是 UI-Routter 在 Angular.js 中的工作方式。
如果您有 2 个状态 - S1 和 S2,并且 S2 是 S1 的子状态,那么当您转到 S2 时,URL 将为 S1/S2。
您的“app”和“app.login”状态没有指定任何 URL,“app.login.main”状态的 URL 指定为“/login”,因此当您在此页面中时,您的 URL 应该是“域/#/登录”。测验页面的状态位于 URL 为“quiz”的“app.login.quiz_list”中。由于您的登录主页和测验页面具有相同的父状态(app.login 是 main 和 quiz_list 的父状态),因此当您移动到此状态时,URL 不会完全更改,只会附加“quiz”网址。因此,测验页面中的 URL 应为“domain/#/login/quiz”。
但是,您的 newsfeed 页面有一个不同的父页面 - “app.front.newfeed”,其 URL 为“/newsfeed”。现在可以看到,app 和 front 状态都没有任何 URL,因此当您进入此状态时,您的 URL 应该是“domain/#/newsfeed”。
为了防止这种情况,我建议将 quiz_list 移动到不同的级别。您声明的层次结构应该是这样的:
- 应用程序
- 登录
- 主要
- 前面
- 新闻源
- 测验列表
- 登录
就代码而言,应该是
app.state('app', ...)
app.state('app.login', ...)
app.state('app.login.main', ...) //URL - /login
app.state('app.front', ...)
app.state('app.front.quiz_list', ...) //URL - /newsfeed
app.state('app.front.newsfeed', ...) //URL - /quiz
关于javascript - 状态更改时 URL 不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40060182/