प्रौद्योगिकी साझेदारी

한어Русский язык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, तथाbeforeRouteLeaveHook functions, एतानि कार्याणि तदा आह्वयन्ति यदा मार्गः वर्तमानघटकं प्रति गच्छति, यदा वर्तमानघटकस्य पुनः उपयोगः भवति, यदा च वर्तमानघटकं त्यजति

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

एतेषां मार्ग-अवरोधकानां तन्त्राणि विकासकान् विभिन्नस्तरयोः परिदृश्येषु च अनुप्रयोगानाम् नेविगेशन-प्रक्रियायाः नियन्त्रणे सहायकं भवितुम् अर्हन्ति, तथा च अनुमतिनियन्त्रणं, आँकडा-पूर्व-भारः, पृष्ठ-कूदनम् इत्यादीनि कार्याणि कार्यान्वितुं शक्नुवन्ति, तस्मात् अग्र-अन्त-अनुप्रयोगानाम् अन्तरक्रियाशील-अनुभवस्य उत्तम-प्रबन्धनं अनुकूलनं च कर्तुं शक्नुवन्ति