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。

您的应用程序＆＃39;和＆＃39; app.login＆＃39;州没有指定任何网址，＆＃39; app.login.main＆＃39; state的URL指定为＆＃34; / login＆＃34;，所以当你在这个页面时，你的URL应该是＆＃34; domain /＃/ login＆＃34;。测验页面的状态位于app.login.quiz_list＆＃39;其网址为＆＃39;测验＆＃39;。由于您的登录主页和测验页面具有相同的父状态（app.login是main和quiz_list的父级），因此当您转到此状态时，URL不会完全更改，只有＆＃39;测验＆＃39;将被附加到URL。因此，测验页面中的网址应为＆＃34; domain /＃/ login / quiz＆＃34;。

但是，您的新闻页面有不同的父级 - ＆＃39; app.front.newfeed＆＃39;其网址为＆＃39; / newsfeed＆＃39;。现在可以看到应用程序和前端状态都有任何URL，所以当你来到这个状态时，你的URL应该是＆＃34; domain /＃/ newsfeed＆＃34;。

为了防止这种情况，我建议将quiz_list移到另一个级别。您的州级层次结构应该是这样的：

应用
- 登录
  - 主要
- 前
  - 新闻源
  - 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

更改状态时URL未更新

1 个答案: