How to Use Vue Router's router-view Component

Oct 20, 2021

Vue Router's <router-view> component displays the component or template that corresponds to the current URL.

<script src=""></script>
<script src=""></script>

<div id="app">
    <router-link to="/home">Go to Home</router-link> <br />
    <router-link to="/about">Go to About</router-link>
  <h1>Observe the Change Below!</h1>
  const routes = [
    { path: '/home', component: { template: '<div>Home</div>' } },
    { path: '/about', component: { template: '<div>About</div>' } }
  const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
  const app = Vue.createApp({});

Below is a live example:

Go to Home
Go to About

Observe the Change Below!


Note that router-view only takes one prop, name. You cannot use router-view to pass props to the rendered component, you need to use the props option for routes.

const router = VueRouter.createRouter({
    path: '/user/:id',
    component: app.component('user'),
    // Pass the `id` route parameter as the `userId` prop.
    props: (route) => {
      return {

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!

More Vue Tutorials