在Aurelia中设置URL而不刷新整个模板

Set URL without refreshing whole template in Aurelia

本文关键字：刷新 Aurelia 设置 URL      更新时间：2023-09-26

在我的Aurelia网络应用程序中，我有一个带有链接的页面。这些被一个click.delegate=""捕获，它转到代码隐藏中的方法。然后，视图代码将使用 http-fetch 进行 AJAX 调用，然后仅通过更新绑定到 HTML 模板中某些元素的内部变量来刷新数据。完美运行，除了一件事 - 它没有反映在 URL 位置栏中（在浏览器中 - 所以书签是不可能的）。

一种解决方案是创建带有参数的路由。这将调用activated()方法，w. param。我观察到构造函数不是一遍又一遍地调用的（导航到相同的路由时，而是使用不同的参数），所以我想正在使用 ViewModel 的相同实例。

{ route: 'cell-detail/:id', name: 'cell-detail', moduleId: 'cell-detail',     title: 'cell-detail' },

但是，我想知道（并防止）每次都呈现整个 HTML 模板，而不仅仅是更改的绑定变量的一部分。我已经在使用activationStrategy.invokeLifecycle，所以也许它已经在以这种方式工作了。我不知道如何找出答案。

这是正确的吗，如果是这样，有没有办法更新 URL/位置栏，而无需重新绘制整个 HTML 模板（设置一个新位置以反映内部更改，而无需使用路由器）？

更新观察Chrome开发者工具中"元素"选项卡中的DOM更改，似乎Aurelia只更新更改的内容 - 就像React的shadow-dom一样。如果使用activationStrategy.replace，至少有很大的可见差异（HTML 在开发控制台中亮起/闪烁）。

但是，使用路由器与仅更新内部绑定变量时似乎存在细微差异，因此，如果有人确定什么是快乐的，那将是启发性的。

为什么不直接使用 History的 API pushState 方法

 history.pushState({someState : someStateValue}, "new title", newUrl);

当然，当用户深度链接到该 URL 时，您需要自己处理正确状态的恢复。您可以在基于params对象的激活方法中执行此操作

activate(params){
    // params.relevantStateValue1
    // params.relevantStateValue2
    // etc
}
相关文章：