aurelia - 如何使用 Aurelia 将图标/图像添加到路线？

Question

我想将图像/图标添加到 Aurelia 路由器配置中指定的导航链接。

Answer 1

我在 GitHub 上找到了答案。您可以在路由器配置中添加 Settings 属性，该属性允许您指定图像的路径。就我而言，我使用的是 SVG:

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

@inject(Router)
export class App {
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
      config.map([
        {route: ['', 'dogs'], moduleId: './dogs', nav: true, title: 'Dogs', settings: './img/dogs-nav.svg'},
        {route: ['cats', 'cats'], moduleId: './cats', nav: true, title: 'Cats', settings: './img/cats-nav.svg'},
    });
  }
}

<ul class="nav navbar-nav">
  <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
    <a href.bind="row.href">
      <img src="${row.settings}">
      <span>${row.title}</span>
    </a>
  </li>
</ul>