Question

我正在尝试编辑项目，以便它使用根视图/状态，其中包含其中的所有其他视图/状态。之前，每个页面都是它自己独立的状态，当我想要向所有状态添加全局内容时这并不是那么好，因为这意味着你必须经常使用$rootScope。

所以在app.js我做到了这一点：

$stateProvider
  .state('app', {
    url: '/',
    templateUrl: 'app/app.html',
    controller: function($state) {
      $state.go('app.home');
    }
});

所以我的逻辑是，我希望保持网站的相同结构以及类似的一切。所以在app.html内我刚刚包含<div ui-view></div>以便我可以注入所有子状态，然后在加载时我只是加载home状态，这个状态最初只是调用的主页{ {1}}。

现在，'/'就是这样：

app.home

此处没有网址，因为我只是从$stateProvider .state('app.home', { templateUrl: 'app/home/home.html', controller: 'HomeCtrl' });加载它。这是我测试过的另一个页面：

app

路由工作正常，视图已加载，但存在一些问题。

导航到$stateProvider .state('app.test', { url: '/test', templateUrl: 'app/test/test.html', controller: 'TestCtrl', authenticate: true });时，网址实际上是/test，带有两个斜杠。如果我在http://localhost:4000//test中创建test网址，我可以强制它为斜线，但我认为这不是正确的解决方案。
如果我从stateProvider重新加载页面，它也会将我重定向回/test和根状态。

有什么想法吗？

Answer 1

url是根据所有父母 url定义构建的 - 加上当前状态的url。即：

"\" + "\test" === "\\test"

如果我们想要没有父母部分的网址，我们可以使用此标志 ^ ：

$stateProvider
  .state('app.test', {
    url: '^/test',
    templateUrl: 'app/test/test.html',
    controller: 'TestCtrl',
    authenticate: true
  });

Absolute Routes (^)

如果你想要绝对的url匹配，那么你需要在你的url字符串前加上一个特殊符号'^'。
$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });
所以路线会变成：


'contacts'州匹配"/contacts"

'contacts.list'州匹配"/list"。由于^被使用，因此未合并网址。

所以，没有绝对路线（^）进入'\ test'实际上会触发其他设置，并进入默认状态......

EXTEND：如何创建默认状态UI-Router标准方式 - working plunker

    .state('app', {
      url: '/',
      templateUrl: 'tpl.html',
      abstract: true,
      //controller:  function($state) {
      //  $state.go('app.home');
      //}
    })
    .state('app.home', {
      url: "",
      ...
    })
    .state('app.test', {
      url: '^/test',
      ...
    })

检查here

UI路由器 - 嵌套视图有双斜线并重定向到根

1 个答案:

Absolute Routes (^)