Wie kann das Problem „Fehler: Umgeleitet beim Wechsel von „xxx“ zu „yyy“ über einen Navigationswächter“ gelöst werden, wenn Vue-Router in einer Vue-Anwendung verwendet wird?

Wie löse ich das Problem „Fehler: Umleitung beim Wechsel von „xxx“ zu „yyy“ über einen Navigationswächter“ bei Verwendung des Vue-Routers in der Vue-Anwendung?

Vue ist ein beliebtes JavaScript-Framework, das die Erstellung interaktiver Webanwendungen erleichtert. Vue Router ist der offizielle Router von Vue. Es ist das Kern-Plug-in, das die Navigation und das Routing in Vue-Anwendungen übernimmt. Bei der Verwendung von vue-router tritt jedoch manchmal ein häufiger Fehler auf: „Fehler: Umgeleitet beim Wechsel von „xxx“ zu „yyy“ über einen Navigationswächter. Dieser Fehler verwirrt Anfänger sehr. In diesem Artikel werden daher die Ursachen und Lösungen dieses Fehlers vorgestellt.

Fehlerursache

Bei der Verwendung von Vue-Router verwenden wir häufig Routing-Guards, um die Berechtigungen der Benutzer beim Zugriff auf bestimmte Seiten zu kontrollieren. Beispielsweise können wir Route Guards verwenden, um Benutzer auf die Anmeldeseite umzuleiten, wenn sie nicht angemeldet sind. Bei der Verwendung von Routenwächtern tritt jedoch manchmal der folgende Fehler auf:

Error: Redirected when going from "xxx" to "yyy" via a navigation guard

Der Grund für diesen Fehler liegt darin, dass wir die Methode beforeEach() verwendet haben, um den Benutzer umzuleiten, die „Umleitungs“-Situation jedoch nicht ordnungsgemäß gehandhabt haben. Wenn wir den Benutzer umleiten, müssen wir Vue Router über diese Tatsache informieren, andernfalls geht Vue Router davon aus, dass wir keine Umleitung vorgenommen haben.

Lösung

Um diesen Fehler zu beheben, müssen wir entsprechende Änderungen an der Art und Weise vornehmen, wie Routenwächter verwendet werden. Hier sind einige mögliche Lösungen:

1. Verwenden Sie next(false)

Wenn wir next(false) verwenden, bedeutet dies, dass wir die Route ohne Umleitung beenden möchten. Wenn wir also next(false) in beforeEach() verwenden, können wir diesen Fehler vermeiden.

Zum Beispiel können wir den Routenschutz wie folgt ändern:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login') //重定向到登录页
  } else {
    next(false) //终止路由
  }
})

2. Verwenden Sie next({ path: '/login' })

Wenn wir next({ path: '/login' }) verwenden, bedeutet dies Wir wollen den Benutzer zum angegebenen Pfad umleiten (hier /login). Auf diese Weise weiß Vue Router, dass wir umgeleitet haben.

Zum Beispiel können wir den Routenschutz wie folgt ändern:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ path: '/login' }) //重定向到登录页
  } else {
    next() //正常路由
  }
})

3. Verwenden Sie next({ name: 'login' })

Wenn wir next({ name: 'login' }) verwenden, bedeutet das, dass wir möchte, dass der Benutzer auf die Route mit dem angegebenen Namen umleitet. Dieser Name ist der im Vue Router definierte Routenname.

Zum Beispiel können wir eine Route mit dem Namen „login“ wie folgt definieren:

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

Dann können wir den Routenschutz wie folgt ändern:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' }) //重定向到具有名称“login”的路由
  } else {
    next() //正常路由
  }
})

Zusammenfassung

Bei der Verwendung von Vue Router müssen wir verstehen, wie das geht Verwenden Sie Route Guards. Dies hilft uns, Benutzerzugriffsrechte zu kontrollieren und Benutzer auf bestimmte Seiten umzuleiten. Bei der Verwendung von Routenwächtern tritt jedoch manchmal der Fehler „Fehler: Umleitung beim Übergang von „xxx“ zu „yyy“ über einen Navigationswächter“ auf. Zu diesem Zeitpunkt müssen wir entsprechende Änderungen an der Art und Weise vornehmen, wie der Routing-Schutz verwendet wird, z. B. die Verwendung von next(false), next({ path: '/login' }) oder next({ name: 'login' }) usw., sodass dieser Fehler vermieden werden kann.

Das obige ist der detaillierte Inhalt vonWie kann das Problem „Fehler: Umgeleitet beim Wechsel von „xxx“ zu „yyy“ über einen Navigationswächter“ gelöst werden, wenn Vue-Router in einer Vue-Anwendung verwendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!