Router Basics — Series 3

Preview — 3 of 10 questions

What does the custom prop unlock here?

javascript

<template>
  <router-link to="/profile" custom v-slot="{ navigate, href, isActive }">
    <button @click="navigate" :class="{ active: isActive }">
      Go to profile ({{ href }})
    </button>
  </router-link>
</template>

Acustom disables navigation entirely — the slot is purely for display, and navigate does nothing when called

Bcustom tells <router-link> not to render its own wrapping <a> element — instead, it exposes navigation state and a navigate function through the default slot, letting you render whatever markup you want (here, a <button>) while still getting proper click handling and active-state tracking

Ccustom is only valid when combined with replace; using it alone throws a compile error

Dcustom changes <router-link> to render a <div> instead of an <a>, but otherwise behaves identically to the default usage

Why does this app need base: '/docs/' in its router configuration?

javascript

const router = createRouter({
  history: createWebHistory('/docs/'),
  routes: [...],
})

Abase sets the default route to redirect to when the app first loads

Bbase has no practical effect and can always be omitted safely

Cbase tells the router the app isn't deployed at the domain root, but under a sub-path — here, https://example.com/docs/. All route matching and generated URLs (from <router-link>, router.push, etc.) are then resolved relative to that base path instead of assuming the app owns the entire domain

Dbase is required only when using createWebHashHistory; createWebHistory ignores it entirely

Does /about/ match the same route as /about?

javascript

const routes = [
  { path: '/about', component: About },
]

ABy default, Vue Router's path matching treats a trailing slash as insignificant for a route like this — /about/ still matches the /about route definition, since the underlying path-to-regex matching is lenient about a trailing slash unless a route is specifically defined with one

B/about/ never matches — it falls through to any catch-all/404 route instead

C/about/ matches, but only in development mode; production builds are strict about trailing slashes

DVue Router automatically redirects /about/ to /about with an HTTP 301, changing the URL bar

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