Condivisione della tecnologia

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

In Vue, i route interceptor vengono utilizzati principalmente per intercettare ed elaborare prima di navigare verso un determinato percorso o quando si lascia un determinato percorso. Questo meccanismo consente agli sviluppatori di eseguire una logica specifica prima o dopo la navigazione del percorso, come la verifica delle autorizzazioni, il caricamento dei dati, i salti di pagina, ecc.

In Vue Router, i route interceptor possono essere implementati nei seguenti modi:

1. Globale prima delle guardie:

   • router.beforeEach(to, from, next): Registra una guardia globale Quando viene attivata la navigazione del percorso, la guardia verrà chiamata prima che il percorso cambi.
   • Scopo: adatto per la verifica delle autorizzazioni globali, il controllo della barra di avanzamento del caricamento della pagina, ecc.

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

2.Protezioni di risoluzione globale:

• router.beforeResolve(to, from, next): Registra una guardia di analisi globale, che prende il nome dalla guardia frontale globale e prima che la navigazione venga confermata.

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

3. Protezione per percorso:

• Aggiungilo direttamente all'oggetto di configurazione del routingbeforeEnterCampo per aggiungere la logica di guardia a un singolo percorso.

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

 

4. Protezioni integrate nel componente:

• Utilizzato all'interno dei componentibeforeRouteEnter, beforeRouteUpdate, EbeforeRouteLeaveFunzioni di hook, queste funzioni verranno chiamate quando la rotta naviga verso il componente corrente, quando il componente corrente viene riutilizzato e quando lascia il componente corrente.

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

I meccanismi di questi route interceptor possono aiutare gli sviluppatori a controllare il processo di navigazione delle applicazioni a diversi livelli e scenari e a implementare funzioni come il controllo delle autorizzazioni, il precaricamento dei dati e i salti di pagina, gestendo e ottimizzando così meglio l'esperienza interattiva delle applicazioni front-end.