Vue JS Vue JS Router and Navigation 2

Question 1

What is the purpose of route meta fields in Vue Router?

Accepted Answer

To attach arbitrary data to routes for use in navigation guards or components

Answer

Route meta fields allow you to attach custom data (like requiresAuth: true) to a route definition, which can then be read in navigation guards.

Question 2

Which Vue Router 4 feature allows you to lazy-load route components to improve initial bundle size?

Accepted Answer

Dynamic import() in the component field

Answer

Using () => import('./MyComponent.vue') in the component field enables code splitting so the component is only loaded when the route is first visited.

Question 3

What does the next() function do inside a Vue Router beforeEach guard?

Accepted Answer

Resolves the navigation, optionally redirecting or aborting it

Answer

Calling next() confirms the navigation, next(false) aborts it, and next('/path') or next({ name: 'route' }) redirects to a different route.

Question 4

How do nested routes work in Vue Router?

Accepted Answer

They are defined in the children array of a parent route and rendered in a nested <router-view>

Answer

Child routes are defined in the children property of a parent route, and the parent component must contain a <router-view> to render them.

Question 5

What is the purpose of the alias property in a Vue Router route definition?

Accepted Answer

To serve the same component at an additional URL path

Answer

alias allows a route to be accessible from multiple paths while rendering the same component without changing the URL visible in the address bar.

Vue JS Practice Test

Vue JS Practice Test

Vue JS Vue JS Router and Navigation 2