Programmatic navigation with useRouter in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the router composable in Vue.

Vue

import { [1] } from 'vue-router';

Drag options to blanks, or click blank then click option'

AcreateRouter

BuseRoute

CuseRouter

Drouter

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useRoute instead of useRouter

Trying to import createRouter which is for router creation

Using a lowercase 'router' which is not a function

The useRouter function is imported from vue-router to enable programmatic navigation.

2fill in blank

medium

Complete the code to get the router instance inside the setup function.

Vue

setup() {
  const router = [1]();
  return {};
}

Drag options to blanks, or click blank then click option'

AuseRouter

BuseRoute

CcreateRouter

Drouter

Attempts:

3 left

💡 Hint

Common Mistakes

Calling useRoute() which gives route info, not router

Trying to call createRouter() which is for creating router

Using a variable name instead of a function call

Inside setup, calling useRouter() returns the router instance for navigation.

3fill in blank

hard

Fix the error in the navigation call to go to '/home'.

Vue

router.[1]('/home');

Drag options to blanks, or click blank then click option'

Anavigate

Bgo

Credirect

Dpush

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'go' which is a window.history method, not Vue Router

Using 'navigate' which is not a Vue Router method

Using 'redirect' which is for route config, not navigation

The push method is used on the router instance to navigate to a new route programmatically.

4fill in blank

hard

Fill both blanks to navigate to a named route with params.

Vue

router.[1]({ name: '[2]', params: { id: 123 } });

Drag options to blanks, or click blank then click option'

Apush

Bhome

Cuser

Dreplace

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'replace' which replaces history instead of pushing

Using wrong route name like 'home' when 'user' is expected

Confusing method names

Use push to navigate and specify the route name as 'user' with params.

5fill in blank

hard

Fill all three blanks to navigate with query parameters.

Vue

router.[1]({ path: '/search', query: { q: '[2]' }, [3]: {} });

Drag options to blanks, or click blank then click option'

Apush

Bvue

Creplace

Dparams

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'replace' instead of 'push' when adding history

Putting query parameters in params instead of query

Leaving out the params key

Use push to navigate to '/search' with query 'q' set to 'vue' and include params key.