Quels sont les trois types de gardes de routage de vue ?

Il existe trois types de gardes de route dans Vue, à savoir : les gardes de route globaux (gardes avant globales, gardes de poste globales), les gardes de route intra-composants et les gardes de route exclusives (qui sont indiqués séparément sur la configuration du routage page). Une garde pour la configuration du routage).

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Route Guard peut également être une interception de route. Nous pouvons utiliser l'interception de route pour déterminer si l'utilisateur est connecté et si l'utilisateur a la permission de parcourir la page. Il doit être combiné avec une méta pour implémenter

.

Route guard en vue Il existe trois types au total, l'un est le garde de routage global, l'un est le garde de routage intra-composant et l'autre est le garde exclusif du routeur

Ce qu'on appelle le garde de routage peut être simplement compris comme l'agent de sécurité à la porte d'une maison. Si vous souhaitez entrer dans la maison, vous devez passer le contrôle de sécurité et dire à l'agent de route d'où vous venez ? Vous ne pouvez pas laisser entrer des étrangers ? Où aller ? Et puis l’agent de sécurité vous dit quoi faire ensuite ? Si vous êtes effectivement une personne autorisée à entrer par le propriétaire de la maison, alors vous serez autorisé à entrer. Sinon, vous devrez appeler le propriétaire de la maison et discuter avec le propriétaire (vous connecter et vous inscrire) pour vous donner. autorisation.

1. Garde globale

1. router.beforeEach((to,from,next)=>{})

2. Les paramètres de la fonction de rappel, vers : quel itinéraire entrer, depuis : de quel itinéraire partir, suivant : fonction, décidez s'il faut afficher la page de routage que vous souhaitez voir.

3. Par exemple : définissez une garde globale dans main.js

• Dans main.js, il existe un routeur d'objet d'instanciation de route. Définir des gardes dans main.js est déjà une garde globale.
• Comme suit, déterminez si le chemin que to.path entre actuellement est une connexion ou un enregistrement. Si tel est le cas, exécutez next() pour afficher l'interface actuelle. Sinon, une alerte apparaît puis passe à l'interface de connexion.
• De cette façon, l'utilisateur verra toujours l'interface de connexion lorsqu'il n'est pas connecté.

router.beforeEach((to,from,next)=>{
  if(to.path == '/login' || to.path == '/register'){
    next();
  }else{
    alert('您还没有登录，请先登录');
    next('/login');
  }
})

4. Le posthook global router.afterEach((to,from)=>{})

• n'a que deux paramètres, vers : quel itinéraire prendre, depuis : depuis quel itinéraire partir.
• Comme suit, chaque fois que vous changez d'itinéraire, une alerte apparaîtra. Après avoir cliqué sur OK, la page actuelle s'affichera.

router.afterEach((to,from)=>{
  alert("after each");
})

5. Déterminez store.gettes.isLogin === false s'il faut se connecter

2. Gardes au sein du composant

1. Lorsque vous atteignez ce composant, beforeRouteEnter:(to,from,next)=>{}

• Dans le fichier Admin.vue, cliquez sur Go Lorsque l'administrateur effectue le routage, exécutez la fonction beforeRouteEnter
• to, et le paramètre from est cohérent avec l'utilisation ci-dessus. La fonction de rappel suivante est légèrement différente.
• Comme le montre l'exemple suivant, la garde dans le composant de données a des circonstances particulières. Si nous accédons directement à la page d'administration avec
  beforeRouteEnter:(to,from,next)=>{ alert("hello" + this.name);}, nous constaterons que l'alerte sort hello undefined. En effet, nos attributs de données ne sont pas accessibles pour le moment et l'ordre d'exécution est incohérent, ce qui est lié au cycle de déclaration. Avant la fin de l'exécution, les données n'ont pas été restituées. Donc ici, next() donnera un rappel correspondant pour vous aider à terminer.

<script>
export default {
    data(){
        return{
            name:"Arya"
        }
    },
    beforeRouteEnter:(to,from,next)=>{
        next(vm=>{
            alert("hello" + vm.name);
        })
    }
}
</script>

2. Lorsque vous quittez ce composant, beforeRouteLeave:(to,from,next)=> {}

• Lorsque vous cliquez sur d'autres composants, déterminez s'il faut confirmer et quitter. Confirmer l'exécution de next(); annuler l'exécution de next(false) et rester sur la page actuelle.

beforeRouteLeave:(to,from,next)=>{
        if(confirm("确定离开此页面吗？") == true){
            next();
        }else{
            next(false);
        }
    }

3. Garde exclusive d'itinéraire

1 avantEnter:(to,from,next)=>{}, utilisation conforme à. gardes mondiaux. Écrivez-le simplement dans l'un des objets de routage et cela ne fonctionnera que sous cette route.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!