Compartilhamento de tecnologia

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

No Vue, os interceptadores de rota são usados ​​principalmente para interceptar e processar antes de navegar para uma determinada rota ou ao sair de uma determinada rota. Este mecanismo permite que os desenvolvedores executem lógicas específicas antes ou depois de ocorrer a navegação de rota, como verificação de permissão, carregamento de dados, saltos de página, etc.

No Vue Router, os interceptadores de rota podem ser implementados das seguintes maneiras:

1. Global Antes dos Guardas:

   • router.beforeEach(to, from, next): Registra um pré-guarda global Quando a navegação de rota é acionada, o guarda será chamado antes da mudança de rota.
   • Finalidade: Adequado para verificação de permissão global, controle da barra de progresso do carregamento da página, etc.

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

2.Guardas de resolução global:

• router.beforeResolve(to, from, next): Registra um guarda de análise global, que é chamado após o guarda frontal global e antes da confirmação da navegação.

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

3. Guarda por rota:

• Adicione-o diretamente ao objeto de configuração de roteamentobeforeEnterCampo para adicionar lógica de guarda a uma única rota.

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

 

4. Protetores no componente:

• Usado dentro de componentesbeforeRouteEnter, beforeRouteUpdate, ebeforeRouteLeaveFunções de gancho, essas funções serão chamadas quando a rota navegar para o componente atual, quando o componente atual for reutilizado e quando sair do componente atual.

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

Os mecanismos desses interceptadores de rota podem ajudar os desenvolvedores a controlar o processo de navegação de aplicativos em diferentes níveis e cenários e implementar funções como controle de permissão, pré-carregamento de dados e saltos de página, gerenciando e otimizando melhor a experiência interativa de aplicativos front-end.