Programmatic navigation with useRouter in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Vue component calls router.push?

Consider this Vue 3 component using useRouter to navigate:

import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';

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

What is the result when goHome() is called?

Vue

import { useRouter } from 'vue-router';
import { defineComponent } from 'vue';

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

A The browser URL changes to '/home' and the app navigates to the Home route without reloading the page.

B An error is thrown because useRouter cannot be used inside setup.

C Nothing happens because router.push requires a callback to work.

D The browser reloads the entire page and then navigates to '/home'.

💡 Hint

Think about how Vue Router handles navigation programmatically.

Calling router.push('/home') changes the URL and navigates to the new route without reloading the page. This is the standard SPA navigation behavior.

📝 Syntax

intermediate

Which option correctly uses useRouter to navigate to a named route with params?

Given a route named 'user' that expects a param id, which code correctly navigates to user with id 42?

A router.push({ name: 'user', query: { id: 42 } })

B router.push('/user/42')

C router.push({ name: 'user', params: { id: 42 } })

D router.push({ path: 'user', params: { id: 42 } })

💡 Hint

Named routes use name and params keys.

To navigate to a named route with params, use router.push({ name: 'user', params: { id: 42 } }). Using query or path with params won't work as expected.

🔧 Debug

advanced

Why does this programmatic navigation fail to update the URL?

Look at this code snippet inside a Vue component:

const router = useRouter();
function goProfile() {
  router.push('/profile');
}

// Called on button click

But clicking the button does not change the URL or route. Why?

Vue

const router = useRouter();
function goProfile() {
  router.push('/profile');
}

// Called on button click
<button @click="goProfile">Go</button>

A The route '/profile' is not defined in the router configuration.

B router.push requires await to work properly.

C useRouter cannot be used inside setup(), it must be imported globally.

D The <code>goProfile</code> function is not exposed in the component's template context.

💡 Hint

Check if the function is accessible in the template.

If goProfile is defined inside setup() but not returned, the template cannot call it, so clicking the button does nothing.

❓ state_output

advanced

What is the value of currentRoute.path after this navigation?

Given this code inside a Vue 3 component:

import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const currentRoute = useRoute();

await router.push('/dashboard');

console.log(currentRoute.path);

What will be logged?

Vue

import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const currentRoute = useRoute();

await router.push('/dashboard');

console.log(currentRoute.path);

A '/dashboard'

B The old path before navigation

C undefined

D An error because currentRoute is not reactive

💡 Hint

Think about reactivity and when currentRoute updates.

useRoute() returns a reactive object. Awaiting router.push() ensures navigation completes, so currentRoute.path is '/dashboard'.

🧠 Conceptual

expert

Which statement about useRouter and programmatic navigation is true?

Choose the correct statement about useRouter and programmatic navigation in Vue 3.

A Calling <code>router.push()</code> always reloads the entire page.

B <code>useRouter</code> can only be used inside <code>setup()</code> or lifecycle hooks of components.

C <code>useRouter</code> returns a new router instance every time it is called.

D Programmatic navigation with <code>router.push()</code> does not update the browser URL.

💡 Hint

Think about where useRouter is designed to be used.

useRouter is a Vue Router composable meant to be used inside the setup() function or lifecycle hooks of Vue components. It returns the router instance used by the app. It does not create new instances. Calling router.push() changes the URL without reloading the page.