Vue JS Vue JS Router and Navigation

Question 1

Which Vue Router function is used to programmatically navigate to a new route?

Accepted Answer

router.push()

Answer

router.push() adds a new entry to the browser history stack and navigates to the specified route.

Question 2

What is the difference between router.push() and router.replace() in Vue Router?

Accepted Answer

push() adds to history; replace() replaces the current history entry

Answer

router.replace() navigates to a route without pushing a new entry onto the history stack, so the back button does not return to the previous route.

Question 3

How do you define a dynamic route segment in Vue Router?

Accepted Answer

Using a colon prefix: :id

Answer

Dynamic segments are defined with a colon prefix (e.g., /user/:id), and the value is accessible via route.params.id.

Question 4

Which Vue Router component renders the matched component for the current route?

Accepted Answer

<router-view>

Answer

<router-view> is the outlet component that displays the component matched by the current route path.

Question 5

What navigation guard runs before every route change at the router level?

Accepted Answer

router.beforeEach()

Answer

router.beforeEach() registers a global guard that runs before every navigation and can block or redirect the navigation.

Vue JS Practice Test