Implementierung des Navigationsschutzes unter dem globalen Routing von vue.js

Der Inhalt dieses Artikels befasst sich mit der Implementierung von Navigationswächtern unter dem globalen Routing von vue.js. Ich hoffe, dass er für Sie hilfreich ist.

Was sind Navigationswächter?

Navigationswächter sind im Allgemeinen Controller, die steuern, welche Routen Benutzer betreten können und welche Routen sie nicht betreten können, d. h. sie verwalten die Routenführung

Wenn Sie beispielsweise zum ersten Mal die Website betreten, Wenn Sie einen Blog schreiben möchten, müssen Sie sich zuerst anmelden, bevor Sie den Blog schreiben können. Die Anmeldeschnittstelle ist wie eine Route, die Sie eingeben können, und der Blog ist eine Route, die Sie nicht eingeben können Der Controller erteilt Ihnen die Erlaubnis, den Blog zu betreten. Dies ist der Zweck von Navigation Guard

Globales Routing muss unter der Datei main.js erstellt werden

Wenn Sie Navigation GuardSie müssen zuerst eine Route haben

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

Verwenden Sie die beforeEach()-Methode des oben genannten Routing-Objekt-Routers, um den Navigation Guard zu implementieren

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

'/login' '/register' um die Routing-Adresse für sich selbst zu definieren

to.path ist die Routing-Adresse, zu der gesprungen werden soll

next() dient zur Anzeige des aktuellen Routings Inhalt

next('/login') springt zur angegebenen Route und zeigt die angegebene Route an. Inhalt

Zu den für das Objekt verfügbaren Informationen (console.log(to)-Ansicht)

Verwandte Empfehlungen:

VueRouter So verwenden Sie von VueRoad dynamisch umgeleitet von und DirektorNavigation

WächterWächter

Das obige ist der detaillierte Inhalt vonImplementierung des Navigationsschutzes unter dem globalen Routing von vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!