複数のSPAを使用してMVCエリアを使用する - SPAルータルート外をナビゲートする

Question

ルータで設定されたルートリストの外にナビゲートするには、どうすればクライアント側のルーティングをエスケープできますか？

私はDurandal.jsを使用してプロジェクトを作成し、異なるエリア内にSPAを作成しました。私が遭遇した問題は、現在のSPAの外に移動して別のSPAに移動したい場合や、SPA以外の単純なcshtmlページであるアプリケーション全体のホームページに戻ってくるときです。

私がやったことは、DurandalのmapUnknownRoutesハンドラを使用してインターセプトし、window.location.hrefを使用してナビゲートすることです。これは動作しますが、アプリケーションのホームページ（ "/"）に移動する場合、ルータはSPAの "ルート"と一致し、ホームページには移動せず、SPAのルートルートに移動します。

この例では、エリアルートは、そのMVCのルートのように見える「/ spaHome」です：

context.MapRoute(
      "spaHome_default", 
      "spaHome/{*catchall}", 
      new { controller = "Home", action = "Index", id = UrlParameter.Optional } 
     ); 

ここで私はデュランダルのルータを設定するために何をやったかです：

var routes = [ 
    { route: ['spaHome', ''], moduleId: 'spaHome', title: "spaHome", hash: "#spaHome"}, 
    { route: 'one/anotherPage', moduleId: 'one/anotherPage', title: "one/anotherPage", hash: "#one/anotherPage"} 
]; 

router.makeRelative({ moduleId: 'viewmodels' }); 

router.map(routes) 
     .mapUnknownRoutes(function (instruction) { 
      utils.navigateToPath(instruction.fragment); 
      return false; 
     }) 
     .activate({ pushState: true, root: "/spaHome" }); 

任意のポインタこれに対して正しい方向へ導くことは大いに感謝しています！

Answer 1

いくつかの試行錯誤の末、私は何を達成しようとしていたかの解決策を考え出すことができました。それは固い解決策のように見えるので、うまくいけば、それは道を行くどんな問題も引き起こさない。

私はルート配列を変更し、最初のルートからのデフォルトルート ''を削除しました。これは、私が通常のMVCホームページを叩きたいときには不明なルートを持つことを可能にしました。私はまた、ルータの活性化機能から "ルート"プロパティを削除する必要がありました。それは、余分な領域部分またはURL（ "spaHome /"）を持つルート配列のルートを明示的に宣言しなければならないことを意味しました。

次に、私のmapUnknownRoutesハンドラで、URLのエリア部分のルートを確認しました。存在していた場合は、そのSPAのページが表示されないようにSPAルータを使用しました。そうでなければ、エリア外にルートがあると仮定し、window.location.hrefを使用して難しいURLにナビゲートする必要があります。

var routes = [ 
    { route: ['spaHome'], moduleId: 'spaHome', title: "spaHome", hash: "#spaHome"}, 
    { route: 'spaHome/one/anotherPage', moduleId: 'one/anotherPage', title: "one/anotherPage", hash: "#spaHome/one/anotherPage"} 
]; 

router.makeRelative({ moduleId: 'viewmodels' }); 

router.map(routes) 
    .mapUnknownRoutes(function (instruction) { 
     if (instruction.fragment.toLowerCase().indexOf("spaHome/", 0) === -1) { 
      utils.navigateToPath(instruction.fragment); 
     } else { 
      var notfoundRoute = "notfound"; 
      instruction.config.moduleId = notfoundRoute; 
      history.navigate(notfoundRoute, { trigger: false, replace: true }); 
     } 
    }) 
    .activate({ pushState: true }); 

もっと良い解決策があれば教えてください。

---

EDIT

これを実行しながら、[OK]を、私は歴史の問題に遭遇しました。以前のルートが履歴キューに追加されなくなるように、Durandalのrouter.jsファイルに行を追加する必要がありました。

if (!instruction.cancelQueue) { 
       router.trigger('router:route:before-config', instruction.config, router); 
       router.trigger('router:route:after-config', instruction.config, router); 
       queueInstruction(instruction); 
      } 

編集2

私はまた、ナビゲーションは以下IE9とのために非常に適切では動作しません。この方法で問題に遭遇しました。