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.go()

Answer

router.navigate()

Answer

router.redirect()

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

push() is async; replace() is sync

Answer

push() supports named routes; replace() does not

Answer

replace() requires a full page reload

Question 3

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

Accepted Answer

Using a colon prefix: :id

Answer

Using curly braces: {id}

Answer

Using brackets: [id]

Answer

Using angle brackets: <id>

Question 4

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

Accepted Answer

<router-view>

Answer

<router-link>

Answer

<route-outlet>

Answer

<nav-view>

Question 5

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

Accepted Answer

router.beforeEach()

Answer

router.afterEach()

Answer

router.beforeResolve()

Answer

router.onError()

Question 6

How do you pass query parameters when navigating programmatically with Vue Router?

Accepted Answer

router.push({ path: '/search', query: { q: 'vue' } })

Answer

router.push({ path: '/search', params: { q: 'vue' } })

Answer

router.push('/search?q=vue') only

Answer

router.push({ name: 'search', search: { q: 'vue' } })