AureliaJS - 从 div 或 JavaScript 导航到路由？

Question

刚开始学习Aurelia JS，遇到了一个问题。

我在app.js 中有我的路线：

  configureRouter(config, router){
    config.title = 'TEST';
    config.map([
      { route: ['','main'], name: 'main', moduleId: './mainpage', nav: true, title:'Main' },
      { route: 'info',     name: 'info', moduleId: './info', nav: true, title:'Info' }
    ]);

    this.router = router;
  }

如果，在mainpage.html，我使用这个：

<div class="button" route-href="route: info;">Go to Info</div>

...然后什么也没有发生；如果我还添加：

<div class="button" route-href="route: info;" click.trigger="route: info;">Go to Info</div>

...然后我遇到au run 的崩溃。但是，如果我改用 <a> 元素：

<a route-href="route: info;"><div class="button">Go to Info</div>

...然后点击路由/导航工作正常 - 但我的 CSS 样式完全搞砸了；我不想专门为此设置<a> 样式。

所以第一个问题：

• 是否可以从<div> 元素导航到路线；如果有，怎么做？

---

我还尝试直接从 JavaScript 执行此操作（根据 Aurelia.io: how to navigate to route，另请参阅 Error: ENOENT: no such file or directory src/aurelia-configuration.js · Issue #64 · Vheissu/aurelia-configuration · GitHub）；所以在mainpage.html 我有这个：

<div class="button" click.trigger="goInfo()">Go to Info</div>

在mainpage.js

import { Router } from 'aurelia-routing';

//~ @inject(Router)
export class Main {
  static inject() { return [Router]; }

  constructor(router) {
    this.router = router;
  }

  goInfo() {
    alert("Go Info");
  }
}

@inject(Router) 失败，找不到类似inject 的东西，所以我使用了教程中的static.. 语法。

只要我没有 import { Router } from 'aurelia-routing'; 部分，我就可以看到 goInfo() 在 div 单击时触发，并显示警报。但只要我添加了aurelia-routing 部分，我就会得到：

...
{ uid: 11,
  name: 'writeBundles',
  branch: false,
  error:
   { [Error: ENOENT: no such file or directory, open '[full project path]/src/aurelia-routing.js']
     errno: -2,
     code: 'ENOENT',
...

...我什至已经添加到aurelia_project/aurelia.json：

...
        "dependencies": [
...
          "aurelia-route-recognizer",
          "aurelia-router",
          {
            "name": "aurelia-router",
            "path": "../node_modules/aurelia-router/dist/commonjs",
            "main": "index"
          },
          "aurelia-task-queue",
...

...但我仍然得到“找不到文件”...不知何故，导入仍然坚持在src/ 中查找文件，即使该文件在node_modules/aurelia-router/ 中也是如此

所以第二个问题是：

• 如何从 JavaScript 执行/导航到路由？请注意，我宁愿不通过 URL 工作（如location.assign('#/info');）

编辑：刚刚发现它不再被称为aurelia-routing，如 我从其他地方复制的mainpage.js 代码 sn-p - 但它 现在称为aurelia-router，如aurelia.js 所示。所以我只是 将mainpage.js 中的导入更改为import { Router } from 'aurelia-router'; - 然后你不需要在卷曲之间插入 aurelia.js 中的大括号 {（"name": "aurelia-router",... 部分）- 然后this.router.navigateToRoute("info"); 在 mainpage.js 的 goInfo() 用于导航。

我仍然想知道是否可以点击 div 使用仅具有属性的路由导航，而不是单独的 JS 函数... EDIT2：可能相关：Aurelia delegate vs trigger: how do you know when to use delegate or trigger?：

只有冒泡的事件才能与 Aurelia 的委托绑定一起使用 命令。 blur、focus、load 和 unload 事件不会冒泡，所以 您需要使用触发器绑定命令来订阅这些 事件。 ...
iOS 不会在a 以外的元素上冒泡点击事件， button、input 和 select。如果您订阅点击 像div 这样的非输入元素并且针对iOS，使用触发器 绑定命令。更多信息 here 和here。

Answer 1

route-href 自定义属性会生成一个href 属性，该属性仅适用于<a>。它不适用于 div，因为 <div href="/page"></div> 不是有效的标记。

要解决这个问题，您可以创建自己的自定义属性。像这样的：

import { customAttribute, bindable, inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';

@inject(Element, Router)
@customAttribute('go-to-route')
export class GoToRoute {

  @bindable route;
  @bindable params;

  constructor(element, router) {
    this.element = element;
    this.router = router;
  }

  attached() {
    this.element.addEventListener("click", () => {
      this.router.navigateToRoute(this.route, this.params);
    });
  }
}

用法：

<template>
  <require from="./go-to-route"></require>
  <div go-to-route="route: somewhere; params.bind: someParams">Go To Somewhere</div>
</template>