Programmatic navigation with useRouter in Vue - Step-by-Step Execution

Concept Flow - Programmatic navigation with useRouter

Import useRouter

↓

Call useRouter() to get router

↓

Define function to navigate

↓

Call router.push() with target path

↓

Vue Router changes URL and view

↓

Component updates to new route

This flow shows how to import and use useRouter to navigate programmatically by calling router.push() to change the route and update the view.

Execution Sample

Vue

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    function goHome() {
      router.push('/')
    }

    return { goHome }
  }
}

This code imports useRouter, gets the router instance inside setup, and defines a function to navigate to the home page.

Execution Table

Step	Action	Evaluation	Result
1	Import useRouter from vue-router	useRouter is available	Ready to get router instance
2	Call useRouter()	router = useRouter()	router object obtained
3	Define goHome function	function goHome() {...}	Function ready to call
4	Call goHome()	router.push('/')	Navigation to '/' triggered
5	Vue Router updates URL	URL changes to '/'	View updates to home page
6	Component re-renders	New route active	Home page content displayed

💡 Navigation completes when router.push updates the URL and Vue updates the view.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
router	undefined	router object	router object	router object

Key Moments - 2 Insights

Why do we call useRouter() inside the setup function or component?

useRouter() must be called inside the component's setup or lifecycle because it accesses Vue Router's context. See execution_table step 2 where router is obtained.

What happens if we call router.push() with a wrong path?

Vue Router tries to navigate but shows a 404 or fallback route if path is invalid. The navigation still triggers as in step 4 but view updates differently.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'router' after step 2?

A undefined

B router object

C function goHome

D null

💡 Hint

Check the variable_tracker table column 'After Step 2' for 'router'

At which step does the URL actually change to '/'?

A Step 5

B Step 3

C Step 4

D Step 6

💡 Hint

See execution_table step 5 where URL changes

If we call router.push('/about') instead of '/', which step changes in the execution table?

A Step 6 component re-render

B Step 2 router creation

C Step 4 action and evaluation

D Step 1 import

💡 Hint

Step 4 shows the navigation target in action and evaluation columns

Concept Snapshot

Programmatic navigation with useRouter:
- Import useRouter from 'vue-router'
- Call useRouter() inside setup to get router
- Use router.push('/path') to navigate
- Vue Router updates URL and view
- Component re-renders with new route content

Full Transcript

Programmatic navigation in Vue uses the useRouter function from vue-router. First, import useRouter and call it inside your component's setup function to get the router instance. Then define a function that calls router.push() with the target path string. When you call this function, Vue Router changes the URL and updates the view to the new route. The component re-renders to show the new page content. This lets you navigate without user clicks on links, useful for buttons or after actions.

Practice

1. What does the useRouter function provide in a Vue 3 component?

easy

A. A method to style components dynamically

B. A way to fetch data from an API

C. Access to the router instance to navigate programmatically

D. A tool to manage component state

Solution

1. Step 1: Understand the purpose of useRouter

   useRouter is a Vue Router composable that gives access to the router instance inside setup functions.

2. Step 2: Identify what the router instance allows

   The router instance allows programmatic navigation, such as using router.push() to change routes.

3. Final Answer:

   Access to the router instance to navigate programmatically -> Option C

4. Quick Check:

   useRouter = router access [OK]

Hint: Remember: useRouter gives router control inside components [OK]

Common Mistakes:

• Thinking useRouter fetches data
• Confusing useRouter with state management
• Assuming useRouter styles components

2. Which of the following is the correct syntax to navigate to the '/home' route using useRouter in Vue 3?

easy

A. const router = useRouter(); router.change('/home');

B. const router = useRouter(); router.push('/home');

C. const router = useRouter(); router.navigate('/home');

D. const router = useRouter(); router.go('/home');

Solution

1. Step 1: Recall the method to change routes programmatically

   The correct method to navigate is router.push().

2. Step 2: Match the syntax with the correct method

   Only router.push('/home') is valid; other methods like go, navigate, or change do not exist on the router instance.

3. Final Answer:

   const router = useRouter(); router.push('/home'); -> Option B

4. Quick Check:

   router.push() navigates routes [OK]

Hint: Use router.push() to navigate routes programmatically [OK]

Common Mistakes:

• Using router.go() instead of router.push()
• Trying router.navigate() which is invalid
• Calling router.change() which doesn't exist

3. Consider this Vue 3 setup code snippet:

import { useRouter } from 'vue-router';
export default {
  setup() {
    const router = useRouter();
    function goToProfile() {
      router.push({ name: 'profile', params: { userId: 42 } });
    }
    return { goToProfile };
  }
}

What happens when goToProfile() is called?

medium

A. The app reloads the current page

B. Nothing happens because router.push requires a string path

C. An error occurs because params cannot be passed this way

D. The app navigates to the route named 'profile' with userId 42 as a parameter

Solution

1. Step 1: Understand router.push with named routes and params

   Using router.push({ name: 'profile', params: { userId: 42 } }) navigates to the route named 'profile' and passes the parameter userId=42.

2. Step 2: Confirm this is valid syntax and behavior

   This is the correct way to navigate to a named route with parameters in Vue Router.

3. Final Answer:

   The app navigates to the route named 'profile' with userId 42 as a parameter -> Option D

4. Quick Check:

   router.push({name, params}) navigates with params [OK]

Hint: Use object with name and params in router.push() for named routes [OK]

Common Mistakes:

• Thinking params can't be passed as object
• Assuming router.push only accepts string paths
• Confusing params with query parameters

4. Identify the error in this Vue 3 setup function using useRouter:

import { useRouter } from 'vue-router';
export default {
  setup() {
    const router = useRouter;
    function goHome() {
      router.push('/home');
    }
    return { goHome };
  }
}

medium

A. useRouter is not called as a function, missing parentheses

B. router.push should use an object, not a string

C. goHome function is not returned from setup

D. router.push is not a valid method

Solution

1. Step 1: Check how useRouter is assigned

   The code assigns const router = useRouter; without parentheses, so router is a reference to the function, not the router instance.

2. Step 2: Understand the impact on router.push call

   Since router is not the router instance, calling router.push() will cause an error because router is not an object with push method.

3. Final Answer:

   useRouter is not called as a function, missing parentheses -> Option A

4. Quick Check:

   Call useRouter() with () to get router instance [OK]

Hint: Always call useRouter() with parentheses to get router [OK]

Common Mistakes:

• Forgetting parentheses after useRouter
• Using string instead of object incorrectly (not error here)
• Not returning functions from setup (actually returned here)

5. You want to redirect users to the login page if they are not authenticated after clicking a button. Which Vue 3 setup code correctly uses useRouter for this programmatic navigation?

hard

A. const router = useRouter(); function checkAuth() { if (!isAuthenticated) router.push('/login'); }

B. const router = useRouter; function checkAuth() { if (!isAuthenticated) router.push('/login'); }

C. const router = useRouter(); function checkAuth() { if (!isAuthenticated) router.go('/login'); }

D. const router = useRouter(); function checkAuth() { if (!isAuthenticated) router.navigate('/login'); }

Solution

1. Step 1: Confirm correct useRouter call

   const router = useRouter(); function checkAuth() { if (!isAuthenticated) router.push('/login'); } correctly calls useRouter() with parentheses to get the router instance.

2. Step 2: Verify correct navigation method

   const router = useRouter(); function checkAuth() { if (!isAuthenticated) router.push('/login'); } uses router.push('/login'), which is the correct method to navigate programmatically.

3. Final Answer:

   const router = useRouter(); function checkAuth() { if (!isAuthenticated) router.push('/login'); } -> Option A

4. Quick Check:

   Call useRouter() and use router.push() for navigation [OK]

Hint: Call useRouter() and use router.push() to redirect [OK]

Common Mistakes:

• Not calling useRouter as a function
• Using router.go() or router.navigate() which don't exist
• Forgetting to check authentication before navigation