RouterView for rendering in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the RouterView component in Vue.

Vue

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

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

ARouterLink

BRouterView

CcreateRouter

DuseRoute

Attempts:

3 left

💡 Hint

Common Mistakes

Importing RouterLink instead of RouterView.

Trying to import from 'vue' instead of 'vue-router'.

The RouterView component is imported from vue-router to render matched components.

2fill in blank

medium

Complete the template to render the matched route component using RouterView.

Vue

<template>
  <div>
    <[1] />
  </div>
</template>

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

Arouter-link

BRouterView

Crouter-view

DRouterLink

Attempts:

3 left

💡 Hint

Common Mistakes

Using RouterView with uppercase letters in the template.

Using router-link instead of router-view.

In Vue templates, the router-view tag is used to render the matched route component.

3fill in blank

hard

Fix the error in the script setup to correctly import RouterView.

Vue

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

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

ARouterView

BrouterView

Crouter-view

DRouterview

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or hyphenated names in import.

Misspelling the component name.

The correct import name is RouterView with exact casing from vue-router.

4fill in blank

hard

Fill both blanks to create a standalone Vue component that renders RouterView.

Vue

<template>
  <[1] />
</template>

<script setup>
import { [2] } from 'vue-router';
</script>

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

Arouter-view

BRouterView

CRouterLink

Drouter-link

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up router-link and router-view.

Incorrect casing in import or template.

The template uses router-view tag to render the matched component, and the script imports RouterView from vue-router.

5fill in blank

hard

Fill all three blanks to define a Vue component that imports RouterView, uses it in template, and exports default.

Vue

<template>
  <[1] />
</template>

<script>
import { [2] } from 'vue-router';

export default {
  components: { [3] }
};
</script>

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

Arouter-view

BRouterView

Drouter-link

Attempts:

3 left

💡 Hint

Common Mistakes

Not registering RouterView in components.

Using wrong casing in template or import.

The template uses router-view tag, the script imports RouterView, and registers it in components for use.