Programmatic navigation with useRouter in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is useRouter in Vue?

useRouter is a function that gives you access to the router instance inside Vue components. It lets you change pages or routes programmatically.

beginner

How do you navigate to a new route using useRouter?

You call router.push('/path') where router is the object returned by useRouter(). This changes the page to the new path.

intermediate

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

router.push() adds a new entry to the browser history, so the user can go back. router.replace() changes the route without adding a new history entry.

intermediate

How do you pass route parameters when navigating programmatically?

You pass an object to router.push() with name of the route and params object. For example: router.push({ name: 'user', params: { id: 123 } }).

beginner

Why use programmatic navigation instead of <router-link>?

Programmatic navigation lets you change routes based on logic, like after a form submits or a button click, where you can't use a static link.

Which Vue function gives you access to the router instance for navigation?

A useRouter

B useRoute

C useNavigate

D useLink

useRouter provides the router instance to navigate programmatically.

What does router.push('/home') do?

A Navigates to '/home' but replaces current history entry

B Reloads the current page

C Navigates to the '/home' route and adds to history

D Does nothing

router.push navigates to a new route and adds a new entry to browser history.

How do you navigate to a named route with parameters?

A router.push('/routeName/param')

B router.push({ name: 'routeName', params: { id: 1 } })

C router.navigate('routeName', 1)

D router.go('routeName', { id: 1 })

You pass an object with name and params to router.push.

Which method changes the route without adding a new history entry?

A router.replace()

B router.back()

C router.push()

D router.forward()

router.replace() replaces the current history entry.

When is programmatic navigation preferred over <router-link>?

A When you want static links

B When you want to style links

C When you want SEO optimization

D When navigation depends on user actions or logic

Programmatic navigation is used when route changes depend on code logic or events.

Explain how to use useRouter to navigate to a new page with parameters in Vue.

Think about how to pass route name and parameters as an object.

Describe the difference between router.push() and router.replace() and when to use each.

Consider how browser back button behaves with each.