Das Vue-Router-Routing stellt fest, dass die Seite nicht angemeldet ist, und springt zur Anmeldeseite

Dieser Artikel enthält hauptsächlich ein Beispiel dafür, wie der Vue-Router feststellt, dass die Seite nicht angemeldet ist, und zur Anmeldeseite springt. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Wie unten gezeigt:

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
 if (token) { // 判断当前的token是否存在
  next();
 }
 else {
  next({
  path: '/login',
  query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
  })
 }
 }
 else {
 next();
 }
});

Fügen Sie vorher ein Metaattribut zur Route hinzu:

{
 path: '/index',
 meta: {
  title: '',
  requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
 },
}

Hinweis: Fakt ist jedoch, dass dies meistens der Fall ist Beim Anmelden gibt es keinen Sprung, daher müssen Sie hier einen Abschnitt zum Anmeldesprungpfad hinzufügen:

if(this.$route.query.redirect){
//  let redirect = decodeURIComponent(this.$route.query.redirect);
  let redirect = this.$route.query.redirect;
  this.$router.push(redirect);
}else{
  this.$router.push('/');
 }

Verwandte Empfehlungen:

Drei Arten von Vue-Router zu Zwischen Komponenten springen implementieren

Über Vue-Router zur Implementierung der Sprungparameterübertragung zwischen Komponenten

Detaillierte Erläuterung des Vue-Router-Routings und der Interpage Navigation

Das obige ist der detaillierte Inhalt vonDas Vue-Router-Routing stellt fest, dass die Seite nicht angemeldet ist, und springt zur Anmeldeseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!