Question

我有这个路由器条目

$locationProvider.html5Mode(true);

.state("main", {
    url: "/",
    views: {
         '' : { templateUrl: 'views/main.html' },
        'performance-ui-view@main': {
            templateUrl: 'views/gdreport.html',
            controller : 'GlobalDashboardController'
        }
    }
})

.state("main.odometer", {
url: "/odometer",
views: {
    'performance-ui-view@main': {
        templateUrl: 'views/odometer.html'
    }
}
})

使用鼠标时工作正常。我被正确地重定向到页面。里程表页面一直是我们的登陆页面，直到上周。此外，还有另一个AngularJS应用程序，它可以加载我们的应用程序，特别是它们需要在Odometer页面中。上周，我们收到了UI设计师的新设计。我更改了菜单以及登录页面。它不再是里程表了。我们的QA测试人员发现这是一个错误的错误。

所以我尝试评论$ locationProvider.html5Mode（true）行;所以我可以在浏览器位置看到路径。然后我在浏览器上尝试了这些调用而没有运气。它总是去gdreport.html，有时甚至是空白。

http://localhost:9000/#/odometer
http://localhost:9000/#//odometer
http://localhost:9000/odometer

我做错了什么？

Answer 1

这里的要点是父子 url 继承。有working plunker with example。

孩子url是根据其祖先和自己的url def构建的。但我们可以覆盖这种行为。

在示例中是上述状态（main和main.odometer），以及名为main.other的全新状态。新内容具有不同的网址定义 - 带有前导符号 ^

// States
$stateProvider
  .state('main', {
      url: "/",
      ...
  })
  .state('main.odometer', {
      url: "/odometer", // will be //odometer
      ...
  })
  .state('main.other', {
      url: "^/other",   // will start from the root /other
      ...
  })

因此，在这种情况下，这些链接将具有以下URL：

  <a ui-sref="main.odometer">- will be parent plus child url //odometer
  <a ui-sref="main.other"> - will result in /other

检查here

文档：

Absolute Routes (^)

如果您想要绝对网址匹配，则需要在网址字符串前加上一个特殊符号'^'。

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

AngularJS UI路由器，部分视图和来自浏览器位置栏的调用视图

1 个答案:

Absolute Routes (^)