So verwenden Sie Vue Router + Vuex, um eine Beurteilung der Anmeldeüberprüfung auf der Startseite zu realisieren

Dieses Mal zeige ich Ihnen, wie Sie Vue Router + Vuex verwenden, um die Beurteilung der Anmeldungsüberprüfung auf der Startseite zu realisieren. Hier sind die praktischen Fälle, schauen wir uns das gemeinsam an.

1.vue-Router

Routing

Beurteilung Das erste, woran wir denken, ist Router.Vorher Jeder geht dem Navigations--Schutz voraus. Diese Methode akzeptiert drei Parameter für den nächsten Schritt. Der to-Parameter ist der Routing-Pfad, der gerade übersprungen wird, from ist die Route, die die aktuelle Navigation verlassen wird, und die nächste Methode wird verwendet, um diesen Haken aufzulösen.

Das Folgende ist ein Beispiel für ein Urteil, das bei der Arbeit geschrieben wurde:

router.beforeEach(async (to, from, next) => {
 const { name, meta } = to;
 const { requireLogin } = meta;
 if (name === 'login') { // 如果是登录页则用next方法resolve掉这个钩子，如果不是，进行到下一个判断
  return next();  
 }
 const needLogin = requireLogin && !store.getters.user.isLogin; // 从store中读取是否获取了已登录的信息
 if (needLogin) {
  return next({  // 如果没有则跳转到登录页，将当前路由路径放到参数中
   name: 'login',
   params: { back: to },
  });
 }
 return next(); 
});

2 .$router.replaceFühren Sie nach Abschluss der Anmeldeanforderung auf der Anmeldeseite die folgenden Vorgänge aus

Rufen Sie die im Pfad gespeicherten Parameter des vorherigen Pfads ab und Springen Sie dann zur Seite

 loginSuccess() {
   const { params: { back } } = this.$route;
   const route = back || { name: 'home' };
   const { name, params, query } = route;
   this.$router.replace({ name, params, query });
  },

Im obigen Code erscheinen zwei Konzepte, die wir oft verwechseln:

Wir wissen, dass this.$router eine Router-Instanz ist und verwendet werden kann, um direkt auf die zuzugreifen Route. Wir nennen jedes Objekt in der Router-Konfiguration einen Routing-Datensatz, und this.$route wird für den Zugriff auf jeden Routing-Datensatz verfügbar gemacht. Wenn wir Parameter erhalten, verwenden wir daher this.$route, und wenn wir zu Routen springen, verwenden wir this.$router.

Im oberen Code verwenden wir „replace“ anstelle von „push“, um die Route zu überspringen. Der Unterschied zwischen den beiden besteht darin, ob ein Datensatz im Verlauf generiert wird. Ersetzen fügt keinen neuen Datensatz hinzu, sondern ersetzt direkt den Routing-Datensatz.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So erstellen Sie eine Webpack+React-Entwicklungsumgebung

Wie Sie mit JS einen Local aufrufen Kamera

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue Router + Vuex, um eine Beurteilung der Anmeldeüberprüfung auf der Startseite zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!