使用 Chrome Ember.js 打开 URL 时无法使 HTML 锚点工作

Question

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

这里我有几个锚点，希望用户点击一个并进入页面的那个部分（很像wikipedia 中使用的）。

这就是问题所在。如果我单击顶部的链接之一，它可以工作。但是，如果我在 Chrome 中输入锚 URL（即localhost:4200/#midnight_love），该 URL 将加载 Ember 应用程序，但无法跳转到锚。我发现这只发生在 Chrome 中，并且该站点将跳转到 Firefox 和 Internet Explorer 中的锚点。如果您只是复制/粘贴到 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;
    });
  }
})