web-dev-qa-db-ja.com

AureliaのURLから#を削除する方法

誰かがステップバイステップで説明できますか、どうすればAureliaのURLから#を削除できますか

17
Pratik Gajjar

あなたが探している機能は PushState と呼ばれます。詳細については、Aurelia Hubの チートシート セクションを参照してください。 Routing/Configuring PushStateまで下にスクロールするだけです。

  1. HTMLドキュメントの先頭に ベースタグ を追加します。 私のアプリはそれなしで動作しているので、これは必須のステップではないと思います。

  2. JSPMを使用している場合は、baseURLを構成します(config.jsファイル内)。

  3. ルーター構成でPushStateを有効にします。

    export class App {
        configureRouter(config) {
            config.title = 'Aurelia';
            config.options.pushState = true; // <-- this line
            config.map([
                //... 
            ]);
        }
    }
  1. PushStateをサポートするようにサーバーを構成します。基本的に、これは、サーバーがすべての不明なルート/ URLをホームURL(Aureliaアプリのアドレス-index.html/home/index...)にリダイレクトする必要があることを意味します。

    この手順は、使用しているサーバー側のテクノロジによって異なります。つまりASP.NET MVCの場合、これはルート構成を定義する方法です。

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            // url: "{*pathinfo}" - this redirects all server side calls
            // to Home/Index (default route)
            // with this single change, HTML5 Push state is enabled
            routes.MapRoute(
                name: "Default",
                url: "{*pathinfo}",
                defaults: new { 
                    controller = "Home", 
                    action = "Index", 
                    id = UrlParameter.Optional 
                }
            );
        }
    }

編集:Dwayne Charringtonは、Discover Aureliaサイトに PushStateに関する素晴らしい記事 を掲載しています。ここでは、Apache、Nginx、.NET Core、Node.jsExpressなどのさまざまなサーバーサイドフレームワークでPushStateを構成する方法について説明しています。 。

22

それを機能させるための簡単な方法を探している場合は、次のようにします。

  1. ルーター設定でsrc/app.ts

    config.options.pushState = true;

  2. ルートディレクトリのindex.htmlに次を追加します。

    <base href="/">

3
Delavega