Angular JS - UI 路由器页面重新加载不会设置状态

Question

这是我的主要应用程序 (app.js)

(function(ng, module) {
    module.config(['$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider){

        $urlRouterProvider.otherwise("app");

        $stateProvider.state('login', {
            url: 'login',
            templateUrl: '/assets/templates/pages/login.html'
        }).state('root', {
            url: '',
            templateUrl: '/assets/templates/pages/index.html'
        });


    }]);
}) (angular, angular.module('myapp', ['ui.router', 'myapp.submodule']));

这是子模块 (submodule.js)

(function(ng, module) {
    module.config(['$stateProvider', function($stateProvider){
        $stateProvider.state('root.substate', {
            url: 'todo/{type}',
            templateUrl: '/assets/app/todo/todo.html',
            controller: function($stateParams, $scope) {
                // Do stuff.
            }
        });
    }]);

}) (angular, angular.module('myapp.submodule', ['ui.router']));

预期的行为是

当找不到匹配的路由时重定向到 "app" url
在 root url
在 /todo url

这工作正常。

但是，如果我刷新页面，则状态未激活，我将返回 "app"。为什么？

Answer 1

我们有两个 root 状态 （无 parent） 状态。这些应该有 no url，或者它应该以一些独特的符号开头 - 最好的选择总是（URI 规范）是 /:

// domain/app/login - easy to find
.state('login', {
    url: 'login',
    ...
})
// no def === domain/app
.state('root', {
    url: '',
    ...
});

现在，让我们为 'root' 状态使用一些 url :

// domain/app/
.state('root', {
    url: '/',
    ...
});

伙计们，我们的 child 'root.substate' 也将包含 parent url 部分。所以如果我们使用这个

// this is a child and its url will be in fact: domain/app//todo/sometype
.state('root.substate', {
    url: '/todo/{type}',
    ...
});

看，这样，我们的 url 现在 child 将包含 //（双斜杠）

为了避免这种情况，我们可以使用 UI-Router 特征 '^'

// this stat will not use the parent part
// this will work domain/app/todo/sometype
.state('root.substate', {
    url: '^/todo/{type}',
    ...
});

查看文档：

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

Answer 2

我知道还有很多时间。但是关于刷新的问题。如果您想保持与刷新前相同的 url 地址，您应该添加下一个：

angular.module('app').run(['$state', '$stateParams', function($state, $stateParams) {
   //this solves page refresh and getting back to state
}]);

喜欢 pre-last 回答中提到的 here

Angular JS - UI 路由器页面重新加载不会设置状态

Angular JS - UI router page reload won't set the state

javascript

angularjs

angular-ui-router