RouterLink for navigation in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a RouterLink that navigates to the home page.

Vue

<RouterLink to=[1]>Home</RouterLink>

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

A"/home"

B"index"

C"home"

D"/"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a path without a leading slash like "home"

Using incorrect paths like "index"

The to attribute in RouterLink should be set to the root path "/" to navigate to the home page.

2fill in blank

medium

Complete the code to create a RouterLink that navigates to the about page.

Vue

<RouterLink to=[1]>About Us</RouterLink>

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

A"/about"

B"about-us"

C"about/"

D"/about-us"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the leading slash in the path

Adding a trailing slash which might cause routing issues

The to attribute should be the path starting with a slash, so "/about" is correct.

3fill in blank

hard

Fix the error in the RouterLink to navigate to the contact page.

Vue

<RouterLink [1]="/contact">Contact</RouterLink>

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

Alink

Bto

Chref

Dnavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of to

Using non-existent attributes like link or navigate

In Vue Router, the correct attribute to specify the target path is to, not href or others.

4fill in blank

hard

Fill both blanks to create a RouterLink that navigates to the user profile page with user ID 42.

Vue

<RouterLink to=[1]>User [2]</RouterLink>

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

A"/user/42"

B"42"

C"/profile/42"

D"userId"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect paths like /profile/42

Displaying variable names instead of the actual user ID

The to attribute should be the path "/user/42". The displayed text should show the user ID, which is "42".

5fill in blank

hard

Fill all three blanks to create a RouterLink with a dynamic route to a product page using product ID and display the product name.

Vue

<RouterLink :to=[1]>Product: [2] (ID: [3])</RouterLink>

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

A`/product/${productId}`

BproductName

CproductId

D"/product/" + productId

Attempts:

3 left

💡 Hint

Common Mistakes

Using template literals without backticks in Vue templates

Mixing variable names and strings incorrectly

The to attribute can be a string concatenation like "/product/" + productId. The displayed text uses productName and productId to show the product details.