Vue アドレスにシャープ記号が含まれる理由について話しましょう-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-13 10:36:20

オリジナル

2526 人が閲覧しました

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 サイトの他の関連記事を参照してください。