AngularJS UI-路由器，部分视图和来自浏览器地址栏的调用视图

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 应用程序加载我们的应用程序，特别是它们需要在里程表页面中。上周，我们收到了 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.

A child url is built from its ancestors and its own url def. But we can override that behaviour.

示例中的状态如上（主要和 main.odometer），加上全新的状态 main.other。新的 url 定义不同 - 前导符号 ^

// 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 (^)

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',
     ...
  });

AngularJS UI-路由器，部分视图和来自浏览器地址栏的调用视图

AngularJS UI-router, partial views and calling view from browser's location bar

javascript

angularjs

partial-views

angular-ui-router

Absolute Routes (^)