Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

In Vue werden Routenabfangjäger hauptsächlich zum Abfangen und Verarbeiten vor dem Navigieren zu einer bestimmten Route oder beim Verlassen einer bestimmten Route verwendet. Dieser Mechanismus ermöglicht es Entwicklern, vor oder nach der Routennavigation eine bestimmte Logik auszuführen, z. B. Berechtigungsüberprüfung, Datenladen, Seitensprünge usw.

In Vue Router können Routeninterceptoren auf folgende Weise implementiert werden:

1. Global vor Wachen:

   • router.beforeEach(to, from, next): Registrieren Sie einen globalen Vorwächter. Wenn die Routennavigation ausgelöst wird, wird der Wächter gerufen, bevor sich die Route ändert.
   • Zweck: Geeignet für die globale Berechtigungsüberprüfung, die Fortschrittsbalkensteuerung beim Laden von Seiten usw.

     router.beforeEach((to, from, next) => {
         // 检查用户权限
         if (!userAuthenticated) {
             next('/login'); // 未认证跳转到登录页
         } else {
             next(); // 已认证则放行
         }
     });
     

2.Global Resolve Guards:

• router.beforeResolve(to, from, next): Registrieren Sie einen globalen Parsing-Guard, der nach dem globalen Front-Guard und vor der Bestätigung der Navigation aufgerufen wird.

  router.beforeResolve((to, from, next) => {
      // 在导航被确认之前，进行数据加载等操作
      fetchData().then(() => {
          next();
      });
  });
  

3. Schutz pro Route:

• Fügen Sie es direkt zum Routing-Konfigurationsobjekt hinzubeforeEnterFeld zum Hinzufügen von Schutzlogik zu einer einzelnen Route.

const route = {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
        // 检查用户是否有权限访问该路由
        if (userHasAccess) {
            next();
        } else {
            next('/403'); // 没有权限跳转到403页面
        }
    }
};

 

4.In-Komponenten-Schutzvorrichtungen:

• Wird in Komponenten verwendetbeforeRouteEnter, beforeRouteUpdate, UndbeforeRouteLeaveHook-Funktionen: Diese Funktionen werden aufgerufen, wenn die Route zur aktuellen Komponente navigiert, wenn die aktuelle Komponente wiederverwendet wird und wenn die aktuelle Komponente verlässt.

export default {
    beforeRouteEnter (to, from, next) {
        // 在路由导航进入该组件前执行逻辑
        next(vm => {
            // 可以访问实例 `vm`
        });
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 可以访问组件实例 `this`
        // 通常用于更新组件的数据
        next();
    },
    beforeRouteLeave (to, from, next) {
        // 在导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        next();
    }
}

Die Mechanismen dieser Routeninterceptoren können Entwicklern dabei helfen, den Navigationsprozess von Anwendungen auf verschiedenen Ebenen und in verschiedenen Szenarien zu steuern und Funktionen wie Berechtigungskontrolle, Datenvorladung und Seitensprünge zu implementieren, wodurch das interaktive Erlebnis von Front-End-Anwendungen besser verwaltet und optimiert wird.