2017-08-24 9 views
5

解決できない問題が発生しました。 RouterConfiguration -> Options-> Push Stateで提供されている手順を実行して、ルート内の先のハッシュタグを削除することは可能です。Aureliaルーティングの先行するハッシュタグを削除できません

これらの手順をすべて実行しました。下記のコードをご覧ください。

app.tsのRouterConfigurationオプション

public configureRouter(config: RouterConfiguration, router: Router) { 
    config.options.pushState = true; 
    config.options.root = '/'; 
    config.map([ 
     { 
      route: 'login', 
      name: 'login', 
      moduleId: 'pages/auth/login', 
      nav: false, 
      title: 'Login', 
      settings: { 
       allow_anonymous: true 
      } 
     } 
    ]); 
    ... 

のindex.htmlヘッド

<head> 
    <meta charset="utf-8"> 
    <base href="/"> 
    ... 

config.jsの

System.config({ 
    baseURL: "/", 
    ... 

私のログインルートはまだlocalhost:9000/#/loginを使用しているだけですが、localhost:9000/loginが見つかりません。 私はまた、これを新鮮なAurelia JSPMスケルトンアプリケーションに実装してみました...

なぜこれが起こっているのか、私は間違っているのでしょうか?

+2

ルーターチームの誰かがこれを見るように指示します。 –

+0

あなたが見せていることは、私のために長い間うまくいきます。言及した新鮮なスケルトンを使ってレプロを押し上げることはできますか? –

+0

@PWKardここでは新鮮なAurelia JSPMスケルトンrepo => https://github.com/bryandh/aurelia-routing-no-hashです ウェルカムルートは 'localhost:9000 /#/ welcome'と入力したときにのみ動作します。視覚的に 'localhost:9000/welcome'に変更されますが、物理的にページ/ルートをリフレッシュしたり、手動でURLにナビゲートしたりするとルートが見つかりません。 – Bryandh

答えて

1

trueにプッシュ状態を設定し、常にあなたのindex.htmlにフォールバックするように設定する必要があります。プロジェクトによっては、変更が必要なタスクファイル(たとえば、Aurelia全体で使用されているGulp serveタスク)がある可能性があります。

例として、Aureliaのスケルトンナビゲーションプロジェクトを取り上げました。 GulpとJSPMを使用してアプリケーションを実行するサブディレクトリskeleton-esnextがあります。ファイルbuild/tasks/serve.jsでは、次のように調整する必要がserve作業です:

var historyFallback = require('connect-history-api-fallback'); 

gulp.task('serve', ['build'], function(done) { 
    browserSync({ 
    online: false, 
    open: false, 
    port: 9000, 
    server: { 
     baseDir: ['.'], 
     middleware: [function(req, res, next) { 
     res.setHeader('Access-Control-Allow-Origin', '*'); 
     next(); 
     }, historyFallback()] 
    } 
    }, done); 
}); 

重要な部分がhistoryFallback()ミドルウェアされます。これは、BrowserSyncによって自動的に提供されます。今すぐこのタスク(gulp serveまたはgulp watch)でアプリを提供する場合は、ルートに直接アクセスできます。 http://localhost:9000/users。あなたはAureliaをブートストラップし、/usersを扱うindex.htmlに向かうにつれて404はなくなります。

+0

ありがとう、これは魅力のように動作します!私はこれを行うことができるとは思ってもいませんでした。 – Bryandh

0

インデックスをルートとしてルータビューのコンテナに動的にロードされている私のビューでは、私のプロジェクトのURLを次のようにすることができました(あなたが求めていると思います) :あなたが共有するように私はできるだけ多くのコードを変更する必要はありませんでした

  • http://localhost:2112/
  • http://localhost:2112/jobs
  • http://localhost:2112/discussion

これを動作させるためにdを使用します。私がやった最初のことは、私のルートhtmlファイルにベース参照を確立することでした。 私にとっては、index.htmlでした。 (@Bryandhで説明したように)

<base href="/" />

その後、私はBrowserSyncについてconfigureRouter()方法

configureRouter(config, route) { 
    ... 
    config.options.pushState = true; 
    ... 
} 
+0

これは私の質問で説明したのとまったく同じですので、残念ながらこれ以上私を助けません。 – Bryandh

+0

@Bryandhこの回答は、「[あなたの]質問に記載されているとおりに」とは限りません。あなたは余分なステップを持っています - 私はこれを動作させるために2行のコードしか書いていませんでした。問題を引き起こしている可能性のある 'config.js'の変更を含む、2行以上の変更がありました。私は最初からやり直して、私の答えが示唆していることを文字通り行うようアドバイスします。がんばろう。 – 8protons

関連する問題