Implémentation de Navigation Guard sous le routage global vue.js-js tutoriel-php.cn

Implémentation de Navigation Guard sous le routage global vue.js

不言

Libérer： 2018-08-23 16:35:11

original

1943 Les gens l'ont consulté

Le contenu de cet article concerne la mise en œuvre des gardes de navigation sous le routage global vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Qu'est-ce qu'un garde de navigation ?

En termes généraux, les gardes de navigation sont des contrôleurs qui contrôlent quels itinéraires les utilisateurs peuvent emprunter et quels itinéraires ils ne peuvent pas emprunter, c'est-à-dire qu'ils gèrent le routage

Par exemple, lorsque vous entrez pour la première fois sur le site Web, Lorsque vous souhaitez écrire un blog, vous devez d'abord vous connecter avant de pouvoir accéder à l'écriture du blog ; l'interface de connexion est comme un itinéraire que vous pouvez saisir, et le blog est un itinéraire que vous ne pouvez pas saisir une fois connecté. Le contrôleur vous donnera la permission d'entrer dans le blog Routage, c'est le but de Navigation Guard

Le routage global doit être créé sous le fichier main.js

Si vous souhaitez utiliser Navigation GuardVous devez d'abord avoir un itinéraire

//main.js
const router= new VueRouter({
  routes:[
    {path:&#39;/&#39;,name:&#39;home&#39;,component:Home},
    {path:&#39;/menu&#39;,name:&#39;menu&#39;,component:Menu},
    {path:&#39;/admin&#39;,name:&#39;admin&#39;,component:Admin},
    {path:&#39;/about&#39;,name:&#39;about&#39;,component:About,redirect: {name:&#39;contactLink&#39;},children:[   //二级路由
        {path:&#39;/about/contact&#39;,name:&#39;contactLink&#39;,component:Contact},
        {path:&#39;/history&#39;,name:&#39;historyLink&#39;,component:History},
        {path:&#39;/delivery&#39;,name:&#39;deliveryLink&#39;,component:Delivery},
        {path:&#39;/orderingGuide&#39;,name:&#39;orderingGuideLink&#39;,component:OrderingGuide,redirect:{name:&#39;phonelink&#39;},children: [  //三级路由
            {path:&#39;/phone&#39;,name:&#39;phonelink&#39;,component:Phone},
            {path:&#39;/name&#39;,name:&#39;namelink&#39;,component:Name}
          ]},
      ]},
    {path:&#39;/login&#39;,name:&#39;login&#39;,component:Login},
    {path:&#39;/register&#39;,name:&#39;register&#39;,component:Register},
    {path:&#39;*&#39;,redirect:&#39;/&#39;}
  ],
  mode:"history"
});

Copier après la connexion

Utilisez la méthode beforeEach() du routeur d'objet de routage ci-dessus pour implémenter la garde de navigation

//main.js
//to:跳转到的路由 from:从哪个路由离开  next:显示函数
router.beforeEach((to,from,next)=>{     
  if(to.path == &#39;/login&#39; || to.path == &#39;/register&#39;){
    next();
  }else{
    alert("请先登录");
    next(&#39;/login&#39;);
  }
});

Copier après la connexion

'/login' '/register' pour définir vous-même l'itinéraire. L'adresse

to.path est l'adresse de routage vers laquelle accéder

next() est. pour afficher le contenu de l'itinéraire actuel.

suivant('/login') passe à l'itinéraire spécifié et affiche le contenu de l'itinéraire spécifié

aux informations disponibles pour l'objet (console.log( à) voir)