javascript - 状态更改时 URL 不更新

Question

对于下面的代码，当我从“/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;


    }
])

Answer 1

发生这种情况是因为 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