Compartir tecnología

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

En Vue, los interceptores de ruta se utilizan principalmente para interceptar y procesar antes de navegar a una ruta determinada o al abandonar una ruta determinada. Este mecanismo permite a los desarrolladores realizar una lógica específica antes o después de que se produzca la navegación en la ruta, como verificación de permisos, carga de datos, saltos de página, etc.

En Vue Router, los interceptores de ruta se pueden implementar de las siguientes maneras:

1. Global ante guardias:

   • router.beforeEach(to, from, next): Registre una preguardia global Cuando se activa la navegación de ruta, se llamará a la guardia antes de que cambie la ruta.
   • Propósito: Adecuado para verificación de permisos globales, control de la barra de progreso de carga de páginas, etc.

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

2.Guardias de resolución global:

• router.beforeResolve(to, from, next): Registre una guardia de análisis global, que se llama después de la guardia frontal global y antes de que se confirme la navegación.

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

3. Guardia por ruta:

• Agréguelo directamente al objeto de configuración de enrutamientobeforeEnterCampo para agregar lógica de guardia a una sola ruta.

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

 

4.Protectores en componentes:

• Componentes interiores usadosbeforeRouteEnter, beforeRouteUpdate, ybeforeRouteLeaveFunciones de enlace, estas funciones se llamarán cuando la ruta navegue hasta el componente actual, cuando el componente actual se reutilice y cuando abandone el componente actual.

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

Los mecanismos de estos interceptores de rutas pueden ayudar a los desarrolladores a controlar el proceso de navegación de las aplicaciones en diferentes niveles y escenarios, e implementar funciones como control de permisos, precarga de datos y saltos de página, administrando y optimizando mejor la experiencia interactiva de las aplicaciones front-end.