Question

我希望更改URL以驱动我的应用程序，并更改应用程序中的更改 URL，但实际上不会更改状态。

我有这样的路线。国家/城市的例子有点做作，希望这不会混淆事情。实际应用程序中的关系有些分层。子视图似乎不合适，因为不需要嵌套视图。

$stateProvider.state( 'viewMap', {
  url: '/viewMap/:country/:city',
  templateUrl: 'pages/viewMap/viewMap.html',
  controller: 'ViewMapController'
};

在ViewMapController中，我可以根据$stateParams.country和.city构建页面。当这些值发生变化时，我的应用程序会做出反应，我希望网址保持同步。但是，我不想重新加载整个页面。我只是想更新url并将历史状态推送到堆栈。

我知道我可以手动构建一个字符串：

updateUrl = function() {
 window.location.hash = '#/viewMap/'+ $stateParams.country +'/'+ $stateParams.city
}

这感觉很脆弱，因为我构建字符串的方式与框架解析它的方式是分开的。我希望框架能够根据当前的参数为我构建一个字符串，但是$state.href('.')描述了当前的路由，它不包括尚未激活/导航到的$ stateParams。

我也看过reloadOnSearch，但我认为它只适用于查询参数。

有更好的方法对此进行建模吗？感觉就像我在简单的框架上对抗框架。

Answer 1

您可以将状态参数传递给$state.href函数以获取完整的网址

$state.href('.', $stateParams)

要生成任意网址，您可以传递非当前参数和/或配置：

$state.href('.', {country:'usa',city:'sf'}, {absolute:true})

更改angular-ui-router的url而不重新加载页面

1 个答案: