如何使用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>