Setting up a default layout for your app

For our template to be functional, it should also contain the <RouterView/> element. One standard setup is to have a navigation menu, <nav>, within the template and RouterView underneath. That way, the content changes between pages while the header menu stays the same.

Navigate to App.vue and ensure that your template has the following code:

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>
  <RouterView />
</template>

Your output should now contain a static header with two navigation links – Home and About – while the content changes depending on the route:

Figure 7.7 –...