vue がページにジャンプしたときにプロンプ​​トをポップアップ表示する方法

Vue は、インタラクティブな単一ページ Web アプリケーションを構築するための非常に人気のある JavaScript フレームワークです。 Vue には多くの強力な機能と使いやすい API がありますが、ルーティングやナビゲーションとともに使用する場合は、プロンプトをポップアップ表示してユーザーにこれからアクセスしようとしているページを知らせる方法を見つける必要がある場合があります。

この記事では、Vue Router と Vue コンポーネントを使用してこの目標を達成する簡単な方法を検討します。

ステップ 1: Vue Router をインストールする

Vue Router は、Vue アプリケーションにルーティング機能を提供する一般的なルーター ライブラリです。この記事では、Vue Router を使用してアプリケーションのナビゲーションを管理します。

Vue Router をインストールするには、npm からインストールする必要があります。次のコマンドを使用して Vue Router をアプリケーションにインストールしてください:

npm install vue-router --save

インストールが完了したら、Vue コンポーネントに Router をインポートし、Vue アプリケーションの一部として設定します。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

上記のコードでは、2 つのルートを定義します。1 つは Home コンポーネントを指すルート、もう 1 つは About コンポーネントを指すルートです。この単純な例では、アプリケーションには 2 ページしかありませんが、さらにページとルートを追加して、プロジェクトのニーズに合わせて調整できます。

ステップ 2: ナビゲーション アラートを追加する

Vue Router の設定が完了したので、ユーザーが別のページに移動したいときに警告をポップアップ表示する方法が必要です。

これには、Vue Router のナビゲーション ガードを使用できます。 Vue Router を使用すると、ルーティング変更の前後にルーティング ミドルウェアを追加できます。ナビゲーションの前に呼び出されるプレルーティング ガードを定義し、アラート ボックスをポップアップ表示して、これからアクセスしようとしているページについてユーザーに知らせます。

router.beforeEach((to, from, next) => {
  if (to.name !== 'Home') {
    if (window.confirm('你确定要离开这个页面吗？')) {
      next()
    } else {
      next(false)
    }
  } else {
    next()
  }
})

上記のコードでは、各ルート遷移の前に呼び出される beforeEach ガードを定義します。このガードでは、ユーザーがホームページ以外のページに移動しようとしているかどうかをチェックします。その場合、警告ボックスがポップアップ表示され、このアクションを本当に行うかどうかをユーザーに尋ねます。ユーザーが確認をクリックすると、新しいルートにリダイレクトされます。ユーザーが「キャンセル」をクリックすると、ナビゲーションはキャンセルされます。

最後に、このルート ガードを Vue コンポーネントで使用する必要がありますが、これを行うには、ルーターを Vue コンポーネントにインポートし、ルーター フック関数を追加します。以下に例を示します。

import router from './router'

export default {
  name: 'App',
  router,
  mounted () {
    this.$router.beforeEach((to, from, next) => {
      if (to.name !== 'Home') {
        if (window.confirm('你确定要离开这个页面吗？')) {
          next()
        } else {
          next(false)
        }
      } else {
        next()
      }
    })
  }
}

上記のコードでは、App コンポーネントのマウントされたメソッドに beforeEach ルート ガードを追加しました。

結論

この記事では、Vue Router と Vue コンポーネントを使用してナビゲーション警告を実装する簡単な方法を紹介しました。このアプローチは少し面倒ですが、より安全で信頼性の高い対話型エクスペリエンスをユーザーに提供できます。 Vue および Vue Router を使用している場合は、この方法を使用してアプリケーションに追加のセキュリティを追加します。

以上がvue がページにジャンプしたときにプロンプ​​トをポップアップ表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。