Guards & Nested Routes — Series 2

Preview — 3 of 10 questions

When does beforeRouteLeave fire, compared to the global beforeEach guard?

javascript

<script setup>
import { onBeforeRouteLeave } from 'vue-router'
import { ref } from 'vue'

const hasUnsavedChanges = ref(true)

onBeforeRouteLeave((to, from) => {
  if (hasUnsavedChanges.value) {
    const confirmed = window.confirm('Discard unsaved changes?')
    if (!confirmed) return false
  }
})
</script>

AbeforeEach is a global guard, registered once on the router instance, running for every navigation regardless of which components are involved; onBeforeRouteLeave (the Composition API equivalent of the Options API beforeRouteLeave hook) is scoped to the specific component instance it's called in, and only fires when navigating away from a route that instance is currently rendering — letting that one component guard its own navigation-away behavior without any global router configuration

BonBeforeRouteLeave and beforeEach fire at the exact same point — they're two equivalent syntaxes for registering the same kind of guard

ConBeforeRouteLeave only works with the Options API — <script setup> components must use a global beforeEach guard instead

DonBeforeRouteLeave fires after the navigation has already completed, purely as a notification — it can't prevent the navigation

Where does beforeResolve fit relative to component-level guards and async route components resolving?

javascript

router.beforeResolve(async (to) => {
  if (to.meta.requiresPermissionCheck) {
    const allowed = await checkPermissions(to.params.resourceId)
    if (!allowed) return '/forbidden'
  }
})

AbeforeResolve runs right after all in-component guards (beforeRouteEnter/beforeRouteUpdate) have resolved and any async route components have finished loading, but before the navigation is confirmed — making it the right place for guard logic that genuinely needs the resolved component/route data to already be available (like checking a permission that depends on data the route's own guards or async component already fetched)

BbeforeResolve is a deprecated alias for beforeEach — both fire at the identical point in the navigation lifecycle

CbeforeResolve runs before any in-component guards or async route components — it's the very first guard to execute

DbeforeResolve only runs for navigations triggered by <router-link> clicks, never for programmatic router.push() calls

Given the URL /products?tag=sale&tag=new, what does route.query.tag contain?

javascript

// URL: /products?tag=sale&tag=new
console.log(route.query.tag) // ?

Aroute.query.tag is the array ['sale', 'new'] — Vue Router automatically collects repeated query keys into an array, rather than keeping just one occurrence; a query key that appears only once stays a plain string, not a single-element array

Broute.query.tag is 'new' — only the last occurrence of a repeated query key is kept

Croute.query.tag is 'sale' — only the first occurrence of a repeated query key is kept, the rest are silently dropped

DThis URL is invalid — Vue Router requires each query key to appear at most once, and throws a parsing error otherwise

Answer all 10 questions (7 more), see explanations for every answer, and track your score.