角度ui路由器父网址设置为/

一尘不染

角度ui路由器父网址设置为/

angularjs

使用ui-
router并将父状态URL设置为/导致我的URL看起来像localhost:8000/#//child在查看子页面时一样。我只想/在散列和子项之间添加一个。

我尝试将父状态网址保留为空白，但是使用锚链接时，ui-sref不会链接回父状态。有人知道使用根级别未命名的父URL的解决方案吗？

app.config

app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");

$stateProvider
  .state("main", {
    url: "/",
    templateUrl: 'sites/main/main.html',
    controller : 'MainController',
    resolve: {
      items: function(srvMenu) {
          return srvMenu.getNav();
      }
  }

 })

});

child.config

emergency.config(function($stateProvider) { 
$stateProvider
    .state("main.emergency", {
      url: "/emergency",
      templateUrl: 'sites/emergency/emergency_menu.html',
      controller : 'EmenuController',
      resolve: {
          emenu: function(srvEmergency) {
              return srvEmergency.getMenu();
          }
      }

    })

    .state("main.emergency.detail", {
      url: "/detail",
      templateUrl: 'sites/emergency/emergency_detail.html',
    })
});

阅读 238

2020-07-04

共1个答案

一尘不染

将ui-router有解决方案 _（几乎）_任何东西。有一个工作的plnkr。我们将要使用的功能称为：绝对路线（^）

因此，让我们从需求开始，拥有以下URL路由：

domain/#/                             -- root for main
domain/#/emergency/                   -- main.emergency
domain/#/emergency/detail             -- main.emergency.detail

使用此ui-sref状态调用时哪个应该工作：

<ul>
    <li><a ui-sref="main">Main</a></li>
    <li><a ui-sref="main.emergency">Emergency</a></li>
    <li><a ui-sref="main.emergency.detail">Detail</a></li>
</ul>

现在，诀窍是：

根 （第一） 状态必须使用url: "/"，以具有一些唯一标识
但是下一个状态可以再次从根开始定义：使用此设置：
url: "^/..."

这是状态配置，可实现所需的结果

  $stateProvider
    // root with '/'
    .state("main", {
      url: "/",
      templateUrl: 'main.tpl.html',
    })
    // here we start again from the root '/emergency'
    .state("main.emergency", {
      url: "^/emergency",
      templateUrl: 'emergency_menu.tpl.html',
    })
    // parent and child '/emergency/detail
    .state("main.emergency.detail", {
      url: "/detail",
      templateUrl: 'emergency_detail.tpl.html',
    });

这是文档：

[绝对路线（^）](https://github.com/angular-ui/ui-router/wiki/URL-

Routing#absolute-routes-)

…还有正在工作的 pl夫 …

2020-07-04