Обмен технологиями

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

В Vue перехватчики маршрутов в основном используются для перехвата и обработки перед переходом к определенному маршруту или при выходе из определенного маршрута. Этот механизм позволяет разработчикам выполнять определенную логику до или после навигации по маршруту, например проверку разрешений, загрузку данных, переходы по страницам и т. д.

В Vue Router перехватчики маршрутов могут быть реализованы следующими способами:

1. Глобальный до охраны:

   • router.beforeEach(to, from, next): зарегистрировать глобальную предварительную охрану. При активации навигации по маршруту охрана будет вызвана до изменения маршрута.
   • Назначение: подходит для глобальной проверки разрешений, управления индикатором выполнения загрузки страниц и т. д.

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

2. Глобальная решимость:

• router.beforeResolve(to, from, next): Зарегистрируйте глобальную защиту синтаксического анализа, которая вызывается после глобальной защиты и перед подтверждением навигации.

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

3. Защита по маршруту:

• Добавьте его непосредственно в объект конфигурации маршрутизации.beforeEnterПоле для добавления охранной логики к одному маршруту.

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

 

4. Встроенная защита:

• Используемые внутренние компонентыbeforeRouteEnter, beforeRouteUpdate, иbeforeRouteLeaveФункции-перехватчики, эти функции будут вызываться, когда маршрут переходит к текущему компоненту, когда текущий компонент используется повторно и когда текущий компонент уходит.

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

Механизмы этих перехватчиков маршрутов могут помочь разработчикам контролировать процесс навигации приложений на разных уровнях и сценариях, а также реализовывать такие функции, как контроль разрешений, предварительная загрузка данных и переходы по страницам, тем самым лучше управляя и оптимизируя интерактивный интерфейс интерфейсных приложений.