Programmatic Navigation: Changing Routes with Code
Instead of a user clicking a link, you trigger navigation from your JavaScript. This is useful for redirecting after an action, like a successful login. The main footgun: params are ignored if you also provide a path—use a named route instead.
Why it exists
Single-page applications need to change the displayed 'page' without a full browser reload. While user-clicked links handle most cases, some navigation must be triggered by application logic, not direct user interaction, such as redirecting after a successful API call.
The mental model
Think of programmatic navigation as a remote control for the browser's address bar. Instead of the user clicking a link (declarative navigation), your code decides when and where to go next. This is crucial for guiding users through a flow, like redirecting from a login page to a dashboard.
How it works
You access the router instance (via this.$router or useRouter()) and call its methods. The three main methods are: first, router.push(), which navigates to a new location and adds it to the browser's history stack; second, router.replace(), which navigates but replaces the current history entry, so the back button won't return to the previous page; and third, router.go(n), which moves forward or backward in the history stack.
When to use it
Use programmatic navigation when a URL change is the result of an event or a process. Common scenarios include: after a user successfully logs in, redirecting them to their profile; after a form submission, sending them to a confirmation page; or programmatically sending a user to a 404 page if data fails to load.
When not to use it
For any standard navigation that a user is meant to initiate directly, prefer declarative navigation with <router-link>. It's more accessible, semantic, and clearly indicates a link to users and search engines. Don't use router.push() for every link on your site; reserve it for logic-driven redirects.
One canonical example
A classic footgun is trying to pass route parameters with a path. The router will ignore the parameters. For example, router.push({ path: '/user', params: { id: 123 } }) is wrong and results in the URL '/user'. The correct way is to use a named route: router.push({ name: 'user-profile', params: { id: 123 } }). This correctly generates the URL '/user/123' because the router uses the route's name to find the correct path structure and inject the parameters.
Interview question
Which code snippet correctly navigates programmatically to a named route 'user-profile' with an 'id' parameter?
- a.router.push({ path: '/user', params: { id: 123 } })
- b.router.push({ name: 'user-profile', params: { id: 123 } })Correct
- c.router.replace({ path: '/user/123' })
- d.router.go('/user/123')
Why? this is the answer
The card highlights that using 'path' with 'params' is a 'footgun' because parameters will be ignored. The correct way to pass parameters with programmatic navigation is to use a named route via the 'name' property. Option A demonstrates the incorrect 'footgun' approach.
Just read this? Test yourself on what you have been reading.
Read the original → router.vuejs.org
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on vue — each one lists the topics its interview covers.
See open roles