Question

我有一个Aurelia应用程序，用户可以选择他们当前正在“处理”的公司。应用程序中的每个页面都取决于当前选定的公司，用户可以从下拉菜单中选择新公司。下拉列表是导航栏上的一个组件。

我想要的是让该组件在change.delegate处理程序上重新加载当前页面，而无需重新启动应用程序。因此，设置window.location.href是不可能的。

有没有办法强制aurelia Router重新加载当前路线/页面？

替代方案是使用EventAggregator来表示整个应用程序中的公司更改，但这需要在每个页面上订阅该事件或者让每个页面都从订阅该事件的基类继承，但这些是更多的选择。

Answer 1

虽然没有得到官方支持，但有各种 ~~hacks~~ 建议in a relevant GitHub issue要求这个功能。

我开始工作的那个不涉及更新aurelia的源代码，也没有为路线添加多余的数据，而是将我所有路线上的activationStrategy设置为invokeLifecycle默认情况下，如下：

import { activationStrategy } from 'aurelia-router';

export class App {

  configureRouter(config, router) {
    config.map([
      { 
        route: ['', 'home'],
        name: 'home',
        moduleId: 'home/index',
        activationStrategy: activationStrategy.invokeLifecycle
      },
      {
        route: 'users',
        name: 'users',
        moduleId: 'users/index',
        nav: true,
        activationStrategy: activationStrategy.invokeLifecycle
      },
      ... etc ...
    ]);
  }

}

这使得路由的activate()方法将在重新加载视图模型时按预期运行。然后，在启动重新加载的代码中，我执行以下操作：

this.router.navigateToRoute(
  this.router.currentInstruction.config.name,
  this.router.currentInstruction.params,
  { replace: true }
);

Answer 2

这不能回答您的确切问题如何强制重新加载当前视图，但您是否考虑过将当前公司标识符添加到您的路线中？这将解决您的问题并使您的路线可收藏：即：/#/company1/view1和/#/company2/view1。当您在下拉列表中更改公司时，使用新路由调用router.navigate()，并且将加载/刷新新视图。

为了回答您的确切问题，我测试了router.navigate选项：router.navigate('myroute', {replace:true, trigger:true})，如果右视图已加载，则没有任何选项强制重新加载视图。通过将?ramdomNumber附加到您的路线名称，您可以强制重新激活视图。

Answer 3

以下是刷新页面的简单解决方案：在 aurelia-history-browser.js 中，添加了一个检查updateHash()，如果新的_href等于旧的，则从缓存（而不是服务器）重新加载页面。

然后，要刷新页面，您只需使用现有选项：

router.navigateToRoute('watch', {}, { replace: true, trigger: true });

更新的代码复制如下：

function updateHash(location, fragment, replace) {
    if (replace) {
      var _href = location.href.replace(/(javascript:|#).*$/, '') + '#' + fragment;
      if (_href == location.href)
        location.reload(false);
      else
        location.replace(_href);
    } else {
      location.hash = '#' + fragment;
    }
  }

Answer 4

更好的回答：

this.router.navigateToRoute(
  this.router.currentInstruction.config.name,
  {
    ...this.router.currentInstruction.params,
    reload: Number(this.router.currentInstruction.queryParams.reload || 0) + 1,
  },
  { trigger: true },
);

navigateToRoute()需要3个参数：

路线名称：（从当前说明中获取）
路由参数：（从当前指令获取并添加增量重新加载以更改路由;最简单的方法使路由器实际导航）
选项： trigger: true选项会强制activationStrategy: invokeLifecycle此特定路由指令，而无需在viewModel或routeConfig中设置此选项以进行正常路由。

在Aurelia重新加载当前页面

4 个答案: