Vue Router: Building SPAs with Multiple Views

What is a Single-Page Application (SPA)?

Before we dive into the code, it's crucial to understand why we need a tool like Vue Router. Most modern web applications you use are Single-Page Applications (SPAs). This is different from a traditional website.

• Traditional (Multi-Page) App: When you click a link (e.g., from 'Home' to 'About'), your browser makes a full request to the server, which sends back an entirely new HTML page. This causes a noticeable white flash and a full page reload.
• Single-Page App (SPA): The server sends the entire application just once. When you click a link, JavaScript intercepts the click, and instead of fetching a new page, it just swaps out the visible components on the client-side. This is much faster and feels more like a native desktop or mobile app.

Vue Router is the official library that makes this client-side navigation possible in Vue.

To get a clearer picture of this concept, let's watch a short explanation.

This diagram also illustrates the core idea. A navigation bar with links allows the user to switch between different components that are rendered in a designated area of the page.

Part 1: Setting Up a Project with Vue Router

The standard and easiest way to include Vue Router is during the project scaffolding process using create-vue (the command-line tool powered by Vite). For this module, let's create a new project to start fresh. This will be the foundation for the personal profile site you'll be building across the next few modules.

After running the command and answering the prompts, follow the on-screen instructions:

1. cd your-project-name
2. npm install
3. npm run dev

When you open the provided localhost URL in your browser, you will see a default Vue application with "Home" and "About" links. Click them—notice how the content changes instantly without a full page reload? That's Vue Router in action!

Part 2: Understanding the Router Configuration

Now that you have a project with Vue Router installed, let's examine the files it created for us. The setup is very logical.

1. src/views/: A new directory containing page-level components like HomeView.vue and AboutView.vue. It's a convention to separate these "page" components from your smaller, reusable "components".
2. src/router/index.js: This is the main configuration file for Vue Router. It's where you define which URL paths should show which components.

Let's break down router/index.js. The video below walks through a modern router file created with Vite, explaining each part.

As you saw in the video, the key parts of router/index.js are:

• createRouter: A function you import from vue-router that creates the router instance.
• createWebHistory: This function enables the standard "history mode" for routing. It gives you clean URLs (like mysite.com/about) without the old-style hash (#) in them.
• routes: An array of objects. Each object is a route record that maps a URL path to a component. A typical route object looks like this:

  {
    path: '/about', // The URL path in the browser
    name: 'about',   // A unique name for this route
    component: AboutView // The component to render for this path
  }
  

Part 3: Navigation (<RouterLink>) and Rendering (<RouterView>)

So, how does Vue use this configuration to actually show pages and let users navigate? It uses two special, globally available components: <RouterLink> and <RouterView>.

You'll find both of them in your App.vue file.

• <RouterLink to="/path">: This is the correct way to create navigation links in a Vue SPA. It renders as an <a> tag but prevents the default browser behavior of a full page reload. The to prop specifies the destination path.
• <RouterView />: This component acts as a placeholder. It's where Vue Router will render the component that matches the current URL.

The following video explains how these two components work together to create the SPA experience.

Part 4: Your Turn - Creating a Multi-View Profile Site

Now it's time to apply what you've learned. You will configure the router for a three-page personal profile site.

Your Task:

1. Create the Views:

   • In your src/views folder, delete the default AboutView.vue and HomeView.vue.
   • Create three new files:
     • HomeView.vue
     • AboutView.vue
     • ContactView.vue
   • In each file, create a basic component template. For now, a simple heading is enough:

     // Example for AboutView.vue
     <template>
       <div>
         <h1>About Me</h1>
       </div>
     </template>
     

2. Define the Routes:

   • Open src/router/index.js.
   • Delete the default route objects inside the routes array.
   • Import your three new view components at the top of the file.
   • Create three new route objects in the routes array, one for each page:
     • Path / should map to HomeView.
     • Path /about should map to AboutView.
     • Path /contact should map to ContactView.
   • Your routes array should look something like this:

     import HomeView from '../views/HomeView.vue'
     import AboutView from '../views/AboutView.vue'
     import ContactView from '../views/ContactView.vue'
     
     const routes = [
       {
         path: '/',
         name: 'home',
         component: HomeView
       },
       {
         path: '/about',
         name: 'about',
         component: AboutView
       },
       {
         path: '/contact',
         name: 'contact',
         component: ContactView
       }
     ]
     

3. Create the Navigation:

   • Open src/App.vue.
   • Clean up the template. Remove the default header and HelloWorld component.
   • Create a <nav> element.
   • Inside the <nav>, add three <RouterLink> components, one for each route you defined.
   • Make sure you still have the <RouterView /> component somewhere in your App.vue template, as this is where your pages will be rendered.
   • Your App.vue might look like this:

     <script setup>
     import { RouterLink, RouterView } from 'vue-router'
     </script>
     
     <template>
       <nav>
         <RouterLink to="/">Home</RouterLink>
         <RouterLink to="/about">About</RouterLink>
         <RouterLink to="/contact">Contact</RouterLink>
       </nav>
     
       <main>
         <RouterView />
       </main>
     </template>
     

Once you've completed these steps, save all files and check your browser. You should see your simple navigation bar, and clicking each link should render the correct heading from your view components.

Conclusion

Excellent work! You have successfully configured Vue Router to create a basic single-page application with three distinct views.

Key Takeaways from this lesson:

• Single-Page Applications (SPAs) provide a faster, smoother user experience by avoiding full page reloads.
• Vue Router is the official library for handling client-side routing in Vue.
• Routes are defined in an array in router/index.js, where each object maps a path to a component.
• <RouterLink to="..."> is used for creating navigation links.
• <RouterView /> is the placeholder where the component for the current route is rendered.

In our next lesson, we will make our application more powerful by learning how to work with dynamic routes. This will allow us to create pages for specific items, such as /blog/my-first-post or /products/42, which is a fundamental requirement for most real-world applications.