在不重新加载页面的情况下更改 angular-ui-router 的 url答案

【问题标题】：Change url of angular-ui-router without reloading page在不重新加载页面的情况下更改 angular-ui-router 的 url
【发布时间】：2023-03-08 20:32:02
【问题描述】：

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

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

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

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

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

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

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

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

有没有更好的建模方法？感觉就像我在为一些简单的事情与框架作斗争。

【问题讨论】：

标签： angular-ui-router

【解决方案1】：

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

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

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

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

【讨论】：