Lazy Loading & Transitions — Series 2

Preview — 3 of 10 questions

Does /products/abc match this route?

javascript

const routes = [
  { path: '/products/:id(\\d+)', component: ProductDetail },
]

AYes — :id(\d+) is just documentation/a hint for editors; Vue Router doesn't actually enforce it at runtime

BNo — the (\d+) custom regex constraint attached to the :id segment means it only matches one-or-more digits; /products/abc fails to match this route entirely (falling through to whatever other route, if any, matches — or a 404), while /products/42 matches with route.params.id as '42'

CYes — (\d+) only restricts what gets stored in route.params.id after matching, it doesn't affect whether the route matches in the first place

DThis is invalid syntax — Vue Router doesn't support attaching a custom regex to a dynamic segment

What does this check, and when might it return false unexpectedly?

javascript

import { router } from './router'

function isFeatureEnabled(routeName) {
  return router.hasRoute(routeName)
}

console.log(isFeatureEnabled('admin-dashboard'))

Arouter.hasRoute(name) checks whether the current URL matches a route with that name — it has nothing to do with whether the route is registered at all

BhasRoute() always returns true for any string — it can't distinguish real route names from typos

Crouter.hasRoute(name) checks whether a route with that name is currently registered in the router's route table — it returns false both for a genuine typo in the name, and for a route that was conditionally registered (e.g. via router.addRoute() behind a feature flag) but never actually added in this particular app session

DhasRoute() only works for routes defined in the original routes array passed to createRouter() — routes added later via router.addRoute() are invisible to it

Why does this module augmentation make to.meta.requiresAuth type-safe, instead of any?

javascript

// router/types.d.ts
import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
  }
}

AThis is invalid TypeScript — you can't add properties to a type from a third-party library like vue-router

BRouteMeta is normally typed as Record<string, any> — without this augmentation, to.meta.requiresAuth would type-check fine but silently be any, with no autocomplete and no protection against typos like to.meta.requiresAuht. Module augmentation merges additional properties directly onto vue-router's own RouteMeta interface, so every route.meta/to.meta access across the whole project becomes fully typed and autocompleted, without needing a custom wrapper type

CThis changes RouteMeta's shape only inside this one file — every other file in the project still sees the original, untyped RouteMeta

Ddeclare module 'vue-router' replaces Vue Router's actual runtime behavior — it changes how meta is populated at runtime, not just its type

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