改变状态时URL不更新

URL not updating when change state

本文关键字：更新 URL 状态 改变      更新时间：2023-09-26

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

    }
])

发生这种情况是因为父状态为您的登录。主和登录。Quiz_list具有相同的父元素。这就是ui - router在Angular.js中的工作方式。

如果你有S1和S2两种状态，S2是S1的子状态，当你转到S2时，URL将是S1/S2。

你的'app'和'app.login'状态没有指定URL， 'app.login'。main' state的URL指定为"/login"，所以当你在这个页面时，你的URL应该是"domain/#/login"。测试页面的状态为"app.login"。quiz_list'， URL是'quiz'。由于您的登录主页和quiz页面具有相同的父状态(app.login是main和quiz_list的父状态)，因此当您移动到此状态时，URL不会完全改变，只有'quiz'将被附加到URL。所以你在测试页面的URL应该是"domain/#/login/quiz"

然而，你的新闻订阅页面有一个不同的父- 'app.front.newfeed'，它的URL为'/newsfeed'。现在可以看到，app的前端状态没有任何URL，所以当你进入这个状态时，你的URL应该是"domain/#/newsfeed"。

为了防止这种情况，我建议将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
相关文章：