Routing & State — Chapter Quiz

Question 1

1

What does createWebHistory() do?

ALogs every route changeBConfigures the router to use the HTML5 History API (clean URLs)CCreates a new Pinia storeDEnables hash-mode routing

createWebHistory is the standard SPA history mode — uses pushState for clean URLs without #.

Question 2

2

How do you render the component for the currently matched route?

A<router-view />B<route-outlet />C<page />D<slot />

<router-view /> is the mount point for the matched route's component.

Question 3

3

Inside a component, how do you read the current route params?

Athis.$paramsBuseParams()CuseRoute().paramsDuseRouter().params

useRoute() exposes the active route; useRouter() is the router instance for navigation.

Question 4

4

What can a beforeEach global guard return to redirect navigation?

AA new ResponseBA route path string or location object like /loginCA promise that throwsDNothing — guards cannot redirect

Return false to cancel, a route target to redirect, or true / nothing to allow.

Question 5

5

How do you lazy-load a route component in Vue Router?

A{ path: '/x', component: () => import('./X.vue') }B{ path: '/x', lazy: true }C{ path: '/x', async: './X.vue' }D{ path: '/x', deferred: true }

A dynamic import() is the standard way — Vite/webpack split it into its own chunk automatically.

Question 6

6

In setup-style Pinia stores, actions are just regular (or async) functions you return.

TTrueFFalse

Setup stores look like composables — refs for state, computeds for getters, functions for actions.

Question 7

7

The Pinia function that creates a store is ___.

defineStore('id', () => { ... }) (setup style) or defineStore('id', { state, getters, actions }) (options style).

Question 8

8

Which return values from a navigation guard prevent the current navigation?

Select all that apply.

false cancels; a route target redirects (also prevents the original); throwing aborts. true and undefined allow.

Test what you learned.