Κοινή χρήση τεχνολογίας

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

Στο Vue, οι αναχαιτιστές διαδρομής χρησιμοποιούνται κυρίως για αναχαίτιση και επεξεργασία πριν από την πλοήγηση σε μια συγκεκριμένη διαδρομή ή κατά την έξοδο από μια συγκεκριμένη διαδρομή. Αυτός ο μηχανισμός επιτρέπει στους προγραμματιστές να εκτελούν συγκεκριμένη λογική πριν ή μετά την πλοήγηση στη διαδρομή, όπως επαλήθευση αδειών, φόρτωση δεδομένων, άλματα σελίδας κ.λπ.

Στο Vue Router, οι παρεμποδιστές διαδρομής μπορούν να εφαρμοστούν με τους ακόλουθους τρόπους:

1. Global Before Guards:

   • router.beforeEach(to, from, next): Καταχώρηση γενικής προφύλαξης Όταν ενεργοποιηθεί η πλοήγηση διαδρομής, ο φρουρός θα καλείται πριν αλλάξει η διαδρομή.
   • Σκοπός: Κατάλληλο για καθολική επαλήθευση αδειών, έλεγχο γραμμής προόδου φόρτωσης σελίδας κ.λπ.

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

2.Global Resolve Guards:

• 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();
    }
}

Οι μηχανισμοί αυτών των υποκλοπών διαδρομής μπορούν να βοηθήσουν τους προγραμματιστές να ελέγξουν τη διαδικασία πλοήγησης των εφαρμογών σε διαφορετικά επίπεδα και σενάρια και να εφαρμόσουν λειτουργίες όπως έλεγχος αδειών, προφόρτωση δεδομένων και άλματα σελίδας, με αποτέλεσμα να διαχειρίζονται καλύτερα και να βελτιστοποιούν τη διαδραστική εμπειρία των εφαρμογών διεπαφής.