带有查询字符串参数的角度 ui 路由器空白页答案

【问题标题】：angular ui router blank page with query string params带有查询字符串参数的角度 ui 路由器空白页
【发布时间】：2015-03-03 00:33:58
【问题描述】：

我已经处理这个查询字符串参数问题很长时间了，如果转到/ 一切正常，但如果尝试类似/?anything 它将无法正常工作，这是我的两个状态其中之一在它自己的文件中。

var access = accessConfig.accessLevels;
$stateProvider.state('store', {
  abstract: true,
  templateUrl: 'store/main.html',
  data: {
    access: access.user
  }
});

$stateProvider.state('store.home', {
  url: '/?cart',
  views: {
    '': {
      templateUrl: 'store/home/home.html',
      controller: 'store.home as vm'
    }
  },
  data: {
    title: 'Home'
  }
});

每当我转到 / 时，我都会毫无问题地获得预期的结果，但如果我尝试转到 /?cart 或 /?anything，我会得到一个空白页，我会在任何时候调用 stateChangeStart 事件转到/，但是当我转到/?anything 时，甚至没有触发该事件。

顺便说一句，我正在使用html5mode(true)，有什么线索吗？

如果使用ui-sref 则有效，但如果直接在地址栏中复制/粘贴网址则无效。

【问题讨论】：

标签： javascript angularjs query-string angular-ui-router

【解决方案1】：

我创建了working plunker here。它表明，这种情况和状态定义是正确的。

我们只需要确定 cart 参数提供了值。这些示例将起作用，因为我们传递了购物车参数：

<a ui-sref="store.home({cart:458})">
<a ui-sref="store.home({cart:'xyz'})">

因为plunker 环境需要提供一些<base href=""，所以我也让它与href 一起工作：

<div ng-controller="appCtrl" >
  <a href="{{path}}?cart=abc">
  <a href="{{path}}?cart=123">
  ...

path 在哪里：

.controller('appCtrl', ['$scope',function($scope) {
    $scope.path = document.location.pathname;
}])

检查所有here，启用html5Mode

扩展

为了证明即使我们想通过地址栏传递参数也能正常工作，我在这里创建了一个特殊的 plunker

http://run.plnkr.co/plunks/syVPqrhNZpQJDdcCxx9b/?cart=myTestParam

我们可以看到，它传递了参数 /?cart=myTestParam，我们可以在这个模板中看到：<pre>{{$stateParams | json}}</pre>:

{
  "cart": "myTestParam"
}

你可以在这里观察它的代码

http://plnkr.co/edit/syVPqrhNZpQJDdcCxx9b?p=catalogue

代码中的重要部分是<head> 部分和元素基础

正确设置html5模式：

$locationProvider.html5Mode({enabled: true, requireBase: true});

【讨论】：

感谢 Radim，我忘了说它可以使用链接，但不能使用直接访问，如键入、复制/粘贴 '/?cart=open' 然后回车。
@Gustavo，我为你创建了我的 plunker 版本，可以直接访问地址栏。你可以输入你喜欢的任何参数，看看这些东西是如何工作的。希望对你有帮助
非常感谢 Radim，我看到您的代码运行良好，但我的代码不行，可能是别的原因。