Creating Single Page Applications (SPAs) with Vue.js — A Complete Beginner’s Guide

📘 Chapter 3: Creating Views and Routing with Vue Router

🧭 What You’ll Learn

By the end of this chapter, you’ll be able to:

• Install and configure Vue Router
• Define routes and associate them with components
• Navigate using router links
• Create dynamic and nested routes
• Use route parameters and query strings
• Apply navigation guards
• Implement scroll behavior and active link styling

🚦 What Is Vue Router?

Vue Router is the official routing library for Vue.js. It allows you to build Single Page Applications (SPAs) that can navigate between views without full-page reloads, using the History API or hash mode.

Vue Router manages:

• The navigation logic
• The URL-to-view mapping
• Route transitions and guards
• Dynamic route matching

🔧 Step 1: Install Vue Router

In a Vite project:

bash

npm install vue-router@4

In a Vue CLI project:

bash

vue add router

Or manually:

bash

npm install vue-router

📂 Project File Structure With Vue Router

bash

src/

├── main.js

├── App.vue

├── router/

│   └── index.js

├── views/

│   ├── Home.vue

│   ├── About.vue

│   └── Contact.vue

└── components/

🛠️ Step 2: Set Up Vue Router in Your Project

router/index.js:

js

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

import Home from '../views/Home.vue'

import About from '../views/About.vue'

const routes = [

  { path: '/', name: 'Home', component: Home },

  { path: '/about', name: 'About', component: About }

]

const router = createRouter({

  history: createWebHistory(),

  routes,

})

export default router

main.js:

js

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

createApp(App).use(router).mount('#app')

🧩 Step 3: Create View Components

Each route corresponds to a Vue component inside /views.

Example: views/Home.vue

vue

<template>

  <div>

    <h1>Home Page</h1>

    <p>Welcome to our Vue SPA!</p>

  </div>

</template>

views/About.vue

vue

<template>

  <div>

    <h1>About Page</h1>

    <p>This is the about section of the site.</p>

  </div>

</template>

🔗 Step 4: Navigate With <router-link>

Use router-link instead of a href to navigate without page reloads.

vue

<template>

  <nav>

    <router-link to="/">Home</router-link>

    <router-link to="/about">About</router-link>

  </nav>

</template>

Add Styling for Active Links:

css

.router-link-active {

  font-weight: bold;

  color: #42b983;

}

📄 Step 5: Add <router-view> to App.vue

This is where your routed components will be displayed.

vue

<template>

  <div id="app">

    <Navbar />

    <router-view />

  </div>

</template>

🔁 Step 6: Dynamic Routes and Params

You can define routes with parameters using :param.

index.js:

js

{ path: '/user/:id', name: 'UserProfile', component: User }

Accessing params in User.vue:

vue

<script>

import { useRoute } from 'vue-router'

export default {

  setup() {

    const route = useRoute()

    return { id: route.params.id }

  }

}

</script>

URL Example: /user/42 → route.params.id === '42'

🧭 Step 7: Programmatic Navigation

Use JavaScript to navigate between routes:

js

import { useRouter } from 'vue-router'

const router = useRouter()

router.push('/about')

router.push({ name: 'UserProfile', params: { id: 10 } })

🔍 Step 8: Query Strings

Routes can include query strings:

js

router.push({ path: '/search', query: { q: 'vue' } })

URL Result: /search?q=vue

Access it with:

js

const route = useRoute()

const searchTerm = route.query.q

🧬 Step 9: Nested Routes

Nested routes allow child components inside parents.

js

const routes = [

  {

    path: '/dashboard',

    component: DashboardLayout,

    children: [

      { path: '', component: DashboardHome },

      { path: 'settings', component: Settings },

    ]

  }

]

Inside the layout component:

vue

<router-view /> <!-- renders DashboardHome or Settings -->

🔒 Step 10: Navigation Guards

Navigation guards protect routes or control flow.

Global Guard:

js

router.beforeEach((to, from, next) => {

  const isAuthenticated = false

  if (to.name !== 'Home' && !isAuthenticated) next({ name: 'Home' })

  else next()

})

Per-Route Guard:

js

{

  path: '/dashboard',

  component: Dashboard,

  beforeEnter: (to, from, next) => {

    if (auth.isLoggedIn()) next()

    else next('/login')

  }

}

🌀 Scroll Behavior

Ensure users start at the top of the page on navigation:

js

const router = createRouter({

  history: createWebHistory(),

  routes,

  scrollBehavior(to, from, savedPosition) {

    return savedPosition || { top: 0 }

  }

})

📊 Route Configuration Table

✅ Routing Features Recap

✅ Summary

Vue Router makes building SPAs easy, modular, and powerful.

You’ve now learned how to:

• Set up and use Vue Router
• Create pages/views and link them
• Handle dynamic and nested routes
• Use programmatic navigation
• Protect routes and manage scroll position

In the next chapter, we’ll create reusable components like headers, footers, and cards to power your layout.