RouterView for rendering in Vue

Introduction

RouterView is used to show the right page or component based on the current web address. It helps your app change views without reloading the whole page.

When you want to show different pages inside a single app layout.

When you build a website with multiple sections like Home, About, and Contact.

When you want smooth navigation without refreshing the browser.

When you need to display nested pages inside other pages.

When you want to keep your app organized by separating views.

Syntax

Vue

<RouterView />

Place where you want the matched page to appear.

It works with Vue Router to load the correct component automatically.

Examples

Basic use: shows the matched page below the title.

Vue

<template>
  <div>
    <h1>My App</h1>
    <RouterView />
  </div>
</template>

RouterView inside a main layout with navigation.

Vue

<template>
  <main>
    <nav>Menu here</nav>
    <RouterView />
  </main>
</template>

RouterView inside a section element for semantic HTML.

Vue

<template>
  <section>
    <RouterView />
  </section>
</template>

Sample Program

This component shows a heading and then the page that matches the current URL using RouterView.

Vue

<template>
  <div>
    <h2>Welcome to Vue Router Demo</h2>
    <RouterView />
  </div>
</template>

<script setup>
// No script needed for this simple example
</script>

Important Notes

Make sure Vue Router is set up and routes are defined for RouterView to work.

You can have multiple RouterView components for nested routes.

Use semantic HTML elements around RouterView for better accessibility.

Summary

RouterView shows the right page based on the URL.

Place it where you want the page content to appear.

Works with Vue Router to make navigation smooth and fast.