未作为链接工作的canjs中的路由未获取href值

import { StacheElement } from "can";
import { Route } from "can-route";

const app = new StacheElement();
app.viewModel = {
  route: new Route()
};

app.attach(document.body);

document.addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'a') {
    event.preventDefault();
    const href = event.target.getAttribute('href');
    // 处理 href 值
    console.log(href);
    // 更新路由
    app.viewModel.route.attr({ page: href });
  }
});

<a href="{{page}}">Go to Page</a>

app.viewModel = {
  page: 'home'
};

import { StacheElement } from "can";

class MyComponent extends StacheElement {
  connected() {
    super.connected();
    this.element.querySelector('a').setAttribute('href', this.page);
  }

  get page() {
    return 'home';
  }
}

customElements.define('my-component', MyComponent);