Route parameters with useRoute in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the useRoute function from Vue Router.

Vue

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

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

AuseRoute

BuseRouter

CuseRouteParams

DuseRouterParams

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useRouter instead of useRoute

Using a non-existent function like useRouteParams

The useRoute function is imported from vue-router to access the current route's information.

2fill in blank

medium

Complete the code to get the current route object inside the setup function.

Vue

const route = [1]();

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

AuseRouter

BuseRouteParams

CgetCurrentRoute

DuseRoute

Attempts:

3 left

💡 Hint

Common Mistakes

Calling useRouter() instead of useRoute()

Trying to call a non-existent function getCurrentRoute()

Calling useRoute() inside setup() returns the current route object.

3fill in blank

hard

Fix the error in accessing the route parameter named 'id'.

Vue

const userId = route.params.[1];

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

Aid

Bparams

CuserId

DrouteId

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong parameter name like 'userId' instead of 'id'

Trying to access route.params.params

Route parameters are accessed by their name, here 'id', inside route.params.

4fill in blank

hard

Fill both blanks to create a reactive computed property that returns the 'id' parameter as a number.

Vue

import { computed } from 'vue';
const route = useRoute();
const userId = computed(() => Number(route.params.[1]));

console.log(userId.[2]);

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

Aid

Bvalue

Cparams

Did.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'params' instead of 'id' for the parameter

Trying to access computed property without '.value'

The parameter name is 'id'. The computed property value is accessed with .value.

5fill in blank

hard

Fill all three blanks to create a Vue component that displays the route 'id' parameter reactively.

Vue

<script setup>
import { [1] } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const userId = [2](() => route.params.[3]);
</script>

<template>
  <p>User ID: {{ userId }}</p>
</template>

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

Acomputed

Bref

Cid

Dparams

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'ref' instead of 'computed' for a derived reactive value

Using 'params' instead of 'id' as the parameter name

We import computed from Vue, use it to create a reactive property, and access the 'id' parameter.