查询参数不适用于 ui-router

Question

我需要使用带有查询参数的完整 url 路由到状态，并根据查询参数在控制器中执行操作。

如果我使用简单的路由 url 和像这样的变量，它工作正常：“/load/:portName/:id”

如果我添加查询参数，它不起作用：“/load?portName&id”

上面应该可以通过 url 访问：“/load?portName=TEST&id=343”

我在下面发布我的代码片段，用于在 html 中定义的路由和控制器：

       $stateProvider
        .state('route0', {
            url:"/",
            templateUrl: '/one.html'
        })
        .state('route1', {
            url:"/starZoom",
            templateUrl: '/two.html'
        })
        .state('route2', {
            url: "/:name",
            templateUrl: function (urlattr) {
                return '/app/' + urlattr.name + '/' + urlattr.name + '.html';
            }
        })
      .state('route3', {
          url:"/load?portName&id",
          views: {
              templateUrl: '/one.html'
          }
        });

HTML :

<div class="viewPanel" 
   ng-controller="StatusSearchController as searchController"
   id="searchStatusContainer"> ....</div>

版本的 angular 和 ui-路由器： "angular": "1.4.10", "angular-sanitize": "1.4.10", "angular-ui-router": "0.2.10"

我想使用 url 直接加载 route3 : localhost:4000/load?portName=test&id=45 谢谢

Answer 1

有a working example

切换状态定义..首先是更具体的，然后是一般的

  .state('route3', {
    url:"/load?portName&id",
    templateUrl: 'tpl.html',
  })
  .state('route2', {
    url: "/:name",
    templateUrl: 'tpl.html',
  })

这些现在可以使用了

<a href="#/starZoom">
<a href="#/name">
<a href="#/load?portName=test&amp;id=45">

因此，/:name 也会匹配 /load，但如果先定义 /load，则会使用它...

检查一下here

查询参数不适用于 ui-router

query parameters not working with ui-router

angularjs

angular-ui-router

angular-routing

angular-ui-router-extras