antfu/vue-router-best-practices

Was macht vue-router-best-practices?

Best Practices für Vue Router 4: Navigation Guards, Routenparameter und Interaktionen zwischen Routen- und Komponentenlebenszyklus.

Navigation Guards

Global Guards

const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
})

router.afterEach((to, from) => {
  // ...
})

Per-Route Guards

const routes = [
  {
    path: '/users/:id',
    component: User,
    beforeEnter: (to, from) => {
      // ...
    },
  },
]

In-Component Guards

const User = {
  template: `...`,
  async beforeRouteEnter(to, from, next) {
    // Zugriff auf `this` erst nach `next` callback
    next(vm => {
      // Zugriff auf Komponenteninstanz über `vm`
    })
  },
  beforeRouteUpdate(to, from) {
    // Reagieren auf Änderungen derselben Route
  },
  beforeRouteLeave(to, from) {
    // Verhindern der Navigation
    const answer = window.confirm('Änderungen verwerfen?')
    if (!answer) return false
  },
}

Routenparameter als Props

Aktiviere props: true um die Route zu entkoppeln und Komponenten wiederverwendbar zu machen.

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true,
  },
]

In der Komponente:

const User = {
  props: ['id'],
  template: '<div>Benutzer {{ id }}</div>',
}

Lifecycle-Integration

Komponenten, die mit Vue Router verwendet werden, haben folgende Schlüsselpunkte im Lebenszyklus:

• beforeRouteEnter oder beforeRouteUpdate: Daten abrufen oder Komponente initialisieren
• created: Auf this.$route und this.$router zugreifen
• mounted: Direkten DOM-Zugriff oder Drittanbieter-Integrationen
• beforeRouteLeave: Aufräumen, Speichern abbrechen oder Benutzer warnen
• unmounted: Event-Listener, Timer oder Abonnements entfernen

Navigation auslösen

// String
router.push('home')

// Objekt
router.push({ path: 'home' })

// Benannte Route
router.push({ name: 'user', params: { userId: '123' } })

// Mit Query
router.push({ path: 'register', query: { plan: 'private' } })

// Ersetzen (kein Eintrag im Browser-Verlauf)
router.replace({ path: 'home' })

Auth Guards Beispiel

router.beforeEach(async (to, from) => {
  if (
    // Erfordert Authentifizierung
    to.meta.requiresAuth &&
    // Nicht authentifiziert
    !authStore.isLoggedIn
  ) {
    // Leite zur Login-Seite weiter
    return {
      name: 'login',
      // Speichere den ursprünglichen Pfad, um nach Login zurückzuleiten
      query: { redirect: to.fullPath },
    }
  }
})

Datenabruf mit Guards

const User = {
  async beforeRouteEnter(to, from, next) {
    try {
      const user = await fetchUser(to.params.id)
      next(vm => vm.setUser(user))
    } catch (error) {
      next({ name: 'not-found' })
    }
  },
  async beforeRouteUpdate(to, from) {
    this.user = await fetchUser(to.params.id)
  },
}

Weitere Details findest du in der offiziellen Dokumentation von Vue Router.