Vue アドレスにシャープ記号が含まれる理由について話しましょう

URL でポンド記号 (#) を使用すると、アンカーの位置決めとページ ジャンプが実現できますが、Vue では特別な目的もあります。では、なぜ Vue アドレスにもポンド記号が表示されるのでしょうか?

1. Vue ルーティングのシャープ記号

Vue は人気のあるシングルページ アプリケーション フレームワークであり、シングルページ アプリケーションのルーティング切り替えを実現するために、Vue では Vue-router ルーティングが導入されています。 -router は URL をコンポーネントにマップできます。URL が変更された場合、ページは再ロードされず、コンポーネントのコンテンツのみが変更されます。 Vue-router では、ポンド記号 (#) がルーティング パスの区切り文字として使用され、次の内容がルーティング パスを表します。例:

http://www.example.com/#/home

2. ブラウザがページを更新する問題を解決します。

Vue-router を使用する場合、非常に一般的な問題は、ユーザーがブラウザのアドレス バーにルーティング パスを直接入力するか、ページを更新すると、404 エラーまたは空白のページが表示されることです。これは、シングルページ アプリケーションには HTML ファイルが 1 つしかなく、アプリケーション全体のコンテンツが動的にレンダリングされ、ブラウザの更新によって URL がサーバーに送信されるためです。サーバーは URL を認識できず、404 エラーを返します。または空白のページ。

この問題を解決する方法は、サーバー側で URL の書き換えを実行し、すべての URL リクエストがアプリケーションのエントリ ファイル (index.html) を指すようにすることです。このようにして、ユーザーがルーティング パスを入力するかページを更新すると、サーバーはエントリ ファイルを正しく返すことができ、Vue-router は URL を解析して対応するコンポーネントを表示します。

ただし、ルーティング パスを直接使用してジャンプを完了すると、リンクがブラウザによってリクエストに解析され、対応するリソースが見つからないという問題が発生します。例:

<a href="/home">首页</a>

この場合、シャープ記号付きの URL を使用してルーティング ジャンプを実装できます:

<router-link to="#/home">首页</router-link>

3. ジャンプ ページのスムーズ スクロールを実装します

Vue-router では、ハッシュ マーク付きの URL にジャンプしてルーティングの変更をリッスンすることで、ルート間のスムーズなスクロールを実現できます。例:

<router-link to="#/home">首页</router-link>

const vueRouter = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        }
    ]
});

vueRouter.afterEach(() => {
    window.scrollTo(0, 0);
});

上記のコードは、#home ルートにジャンプすると、ページが上部までスムーズにスクロールすることを実現します。

概要

Vue では、シャープ記号は Vue ルーティングの要素の 1 つです。ルーティング パスを分離したりジャンプしたりするために使用されます。ブラウザの更新の問題を解決するためにも使用できます。ジャンプページのスムーズなスクロールを実現します。したがって、Vue ではポンド記号は特別な役割を果たします。

以上がVue アドレスにシャープ記号が含まれる理由について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。