Comment faire apparaître une invite lorsque vue passe à une page

Vue est un framework JavaScript très populaire pour créer des applications Web interactives d'une seule page. Bien que Vue dispose de nombreuses fonctionnalités puissantes et d'API faciles à utiliser, lorsqu'il est utilisé avec le routage et la navigation, il est parfois nécessaire de trouver un moyen d'afficher une invite pour indiquer à l'utilisateur quelle page il est sur le point de visiter.

Dans cet article, nous explorerons un moyen simple d'y parvenir en utilisant Vue Router et les composants Vue.

Étape 1 : Installer Vue Router

Vue Router est une bibliothèque de routeurs populaire qui fournit des fonctionnalités de routage pour les applications Vue. Dans cet article, nous utiliserons Vue Router pour gérer la navigation de nos applications.

Pour installer Vue Router, vous devez l'installer à partir de npm. Veuillez utiliser la commande suivante pour installer Vue Router dans votre application :

npm install vue-router --save

Une fois l'installation terminée, importez le routeur dans votre composant Vue et configurez-le dans le cadre de l'application 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
    }
  ]
})

Dans le code ci-dessus, nous définissons deux routes, l'une est la route pointant vers le composant Home et l'autre est la route pointant vers le composant About. Dans cet exemple simple, notre application ne comporte que deux pages, mais vous pouvez ajouter davantage de pages et d'itinéraires pour l'adapter aux besoins de votre projet.

Deuxième étape : ajouter une alerte de navigation

Maintenant que notre Vue Router est configuré, nous avons besoin d'un moyen d'afficher un avertissement lorsque l'utilisateur souhaite naviguer vers une autre page.

Pour cela, nous pouvons utiliser la garde de navigation de Vue Router. Vue Router vous permet d'ajouter un middleware de routage avant ou après les modifications de routage. Nous définirons un garde pré-itinéraire qui sera appelé avant la navigation et afficherons une boîte d'alerte pour informer l'utilisateur de la page qu'il est sur le point de visiter.

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

Dans le code ci-dessus, nous avons défini un garde beforeEach qui sera appelé avant chaque transition de route. Dans cette garde, nous vérifions si l'utilisateur tente de naviguer vers une page autre que la page d'accueil. Si tel est le cas, nous afficherons une boîte d'avertissement demandant à l'utilisateur s'il est sûr de cette action. Si l'utilisateur clique sur confirmer, il sera redirigé vers le nouvel itinéraire. Si l'utilisateur clique sur Annuler, la navigation sera annulée.

Enfin, nous devons utiliser ce garde-route dans le composant Vue, nous pouvons le faire en important un routeur dans le composant Vue et en ajoutant une fonction de hook de routeur. Voici un exemple :

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()
      }
    })
  }
}

Dans le code ci-dessus, nous avons ajouté le garde-route beforeEach dans la méthode montée du composant App.

Conclusion

Dans cet article, nous avons présenté un moyen simple d'implémenter des avertissements de navigation à l'aide de Vue Router et des composants Vue. Bien que cette approche soit un peu lourde, elle peut offrir à vos utilisateurs une expérience interactive plus sûre et plus fiable. Si vous utilisez Vue et Vue Router, utilisez cette méthode pour ajouter une sécurité supplémentaire à votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!