javascript - 使用 Chrome Ember.js 打开 URL 时无法使 HTML anchor 正常工作

Question

我有以下简单的 ember 应用程序(只有一个 application.hbs 文件)。

这里我有几个 anchor ，希望用户单击一个 anchor 并转到页面的该部分(很像 wikipedia 中使用的内容)。

问题就在这里。如果我单击顶部的链接之一，它就会起作用。但是，如果我在 Chrome 中输入 anchor URL(即 localhost:4200/#midnight_love)，该 URL 将加载 Ember 应用程序，但无法跳转到 anchor 。我发现这种情况只发生在 Chrome 中，并且该网站在 Firefox 和 Internet Explorer 中都会跳转到 anchor 。如果您只需将其复制/粘贴到 ember 应用程序的 application.hbs 中，那么下面给出了重现此问题所需的所有代码。

另请注意，如果我只是将此代码粘贴到 HTML 文件中，则该完全相同的代码将适用于所有浏览器。

Application.hbs

<ul>
<li><a href="#Early_career">1 <span class="toctext">Early career</span></a></li>
<li><a href="#Initial_success">2 <span class="toctext">Initial success</span></a></li>
<li><a href="#What's_Going_On_and_subsequent_success">3 <span class="toctext"><i>What's Going On</i> and subsequent success</span></a></li>
<li><a href="#Last_Motown_recordings_and_European_exile">4 <span class="toctext">Last Motown recordings and European exile</span></a></li>
<li><a href="#Midnight_Love">5 <span class="toctext"><i>Midnight Love</i></span></a></li>
</ul>

<h2><span id="Early_career">Early_career</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="Initial_success"></span>Initial_success</h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="What's_Going_On_and_subsequent_success">What's_Going_On_and_subsequent_success</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="Last_Motown_recordings_and_European_exile">Last_Motown_recordings_and_European_exile</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="Midnight_Love">Midnight_Love</span></h2>

Answer 1

将 window.location 替换为 window.location.hash，将以下代码粘贴到您的 Controller /application.js

import Controller from '@ember/controller';
import $ from 'jquery';

export default Controller.extend({
  init() {
    this._super(...arguments);
    $(document).ready( function( ) {
      if (window.location.hash)
        window.location = window.location.hash;
    });
  }
})