Vue JS Vue JS Router and Navigation 2 — Questions and Answers
Question 1: What is the purpose of route meta fields in Vue Router?
- To store component props
- To attach arbitrary data to routes for use in navigation guards or components (Correct answer)
- To define route animations
- To specify the HTTP method for route requests
Correct answer: To attach arbitrary data to routes for use in navigation guards or components
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?
- Static imports at the top of the router file
- Dynamic import() in the component field (Correct answer)
- require() syntax in route definitions
- router.preload() calls
Correct answer: Dynamic import() in the component field
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?
- Logs the navigation event
- Resolves the navigation, optionally redirecting or aborting it (Correct answer)
- Fetches route data before rendering
- Updates the document title
Correct answer: Resolves the navigation, optionally redirecting or aborting it
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?
- They are defined using route.addChild()
- They are defined in the children array of a parent route and rendered in a nested <router-view> (Correct answer)
- They are automatically detected based on folder structure
- They require separate router instances
Correct answer: They are defined in the children array of a parent route and rendered in a nested <router-view>
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?
- To rename the route component
- To serve the same component at an additional URL path (Correct answer)
- To create a redirect to another route
- To add query string defaults
Correct answer: To serve the same component at an additional URL path
alias allows a route to be accessible from multiple paths while rendering the same component without changing the URL visible in the address bar.
Question 6: Which Vue Router hook runs inside a component and fires before the component is mounted when entering the route?
- onBeforeMount()
- beforeRouteEnter() (Correct answer)
- onBeforeRouteUpdate()
- beforeCreate()
Correct answer: beforeRouteEnter()
beforeRouteEnter is an in-component navigation guard that runs before the component is created, so 'this' is not yet available.
Vue JS Vue JS Router and Navigation 2
What is the purpose of route meta fields in Vue Router?