RouterView for rendering in Vue - Mini Project: Build & Apply

Using <code>RouterView</code> to Render Pages in Vue

📖 Scenario: You are building a simple Vue app that shows different pages when users navigate. You will use Vue Router's RouterView component to display the current page content.

🎯 Goal: Create a Vue app with a router and use RouterView to render the matched page component inside the main layout.

📋 What You'll Learn

Create a basic Vue app with a router

Define two simple page components: Home and About

Set up routes for '/' and '/about' paths

Use RouterView in the main App component to show the current page

💡 Why This Matters

🌍 Real World

Most Vue apps use Vue Router to handle navigation between pages or views. Using <code>RouterView</code> lets you display the correct page content based on the URL.

💼 Career

Understanding how to use Vue Router and <code>RouterView</code> is essential for frontend developers building single-page applications with Vue.

1

Set up Vue Router with two routes

Create a router instance in a file called router.js with two routes: { path: '/', component: Home } and { path: '/about', component: About }. Import createRouter and createWebHistory from 'vue-router'. Also, create two simple components called Home and About as empty objects for now.

Vue

import { createRouter, createWebHistory } from 'vue-router'

// Your code here

Need a hint?

Remember to import createRouter and createWebHistory from 'vue-router'. Define the routes array with the two paths and components. Then create the router instance and export it.

2

Create simple Home and About components

Replace the empty Home and About objects with Vue components using the defineComponent function. Each component should have a template property with a <h1> heading: 'Home Page' for Home and 'About Page' for About. Import defineComponent from 'vue'.

Vue

import { createRouter, createWebHistory } from 'vue-router'
import { defineComponent } from 'vue'

// Your code here

Need a hint?

Use defineComponent to create components with a simple template string showing the page title.

3

Use RouterView in the main App component

Create a Vue component called App using defineComponent. Inside its template, add a <nav> with two <a> links: one to / labeled 'Home' and one to /about labeled 'About'. Below the navigation, add the <RouterView /> component to render the current route's page. Import RouterView from 'vue-router'.

Vue

import { defineComponent } from 'vue'
import { RouterView } from 'vue-router'

// Your code here

Need a hint?

Use RouterView inside the template to show the current page. Add navigation links with <a> tags.

4

Create Vue app and mount with router and App component

In your main entry file (e.g., main.js), import createApp from 'vue', import the App component and the router from router.js. Create the Vue app with createApp(App), use the router with app.use(router), and mount the app to an element with id app.

Vue

import { createApp } from 'vue'
import App from './App.js'
import router from './router.js'

// Your code here

Need a hint?

Remember to create the app, add the router with use, and mount it to the element with id app.