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

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

本文关键字：视图 浏览器 地址栏 调用 路由器 AngularJS UI      更新时间：2023-09-26

我有这个路由器条目

$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

我做错了什么？

这里的重点是父子 url继承。有一个带有示例的工作 plunker。

子url是由它的祖先和自己的url构建的。但我们可以推翻这种行为。

在示例中是上述状态（main 和 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

在这里查看

文档：

绝对路线 （^）

如果要绝对匹配网址，则需要在网址字符串前面加上特殊符号"^"。

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });
相关文章：