Vue Router Getting Started Guide - Build Amazing Navigation Experiences 🎊

Your journey begins here - Transform static pages into dynamic, navigable applications!

Welcome to the exciting world of Vue Router! 🎉 As the officially recommended routing solution for Vue.js, we'll help you create single-page applications with buttery-smooth page transitions and professional-grade navigation experiences.

🚀 Quick Start

Imagine this: your application has multiple pages, but when users switch between them, the page doesn't refresh while the URL address updates synchronously—that's the magic of Vue Router!

Core Concepts Overview

Vue Router is built on Vue's component system, which you can understand like this:

• Route Configuration: Tell Vue Router which URL corresponds to which component
• Router Links: Use <RouterLink> instead of traditional <a> tags
• Router Views: Use <RouterView> as the rendering area for components

Simple Example

Let's look at a vivid example:

<template>
  <h1>Welcome to My App!</h1>
  <p><strong>Current Route:</strong> {{ $route.fullPath }}</p>
  
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About Us</RouterLink>
  </nav>
  
  <main>
    <RouterView />
  </main>
</template>

In this example:

• RouterLink acts like smart navigation buttons—URL changes when clicked but the page doesn't refresh
• RouterView is the content display area that automatically shows the corresponding component based on the current URL
• $route allows you to access various information about the current route

🛠️ Creating a Router Instance

Creating a router is as simple as building with blocks:

import { createRouter, createWebHistory } from 'vue-router'
import Home from './Home.vue'
import About from './About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

Route Configuration Explanation:

• path: URL path, such as /about
• component: Corresponding Vue component
• history: Determines how URLs are displayed (we'll explain this in detail later)

🔌 Registering the Router Plugin

After creating the router, you need to tell the Vue application to use it:

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

const app = createApp(App)
app.use(router)  // Register the router plugin
app.mount('#app')

⚠️ Important: Always call use(router) before mount()!

📱 Accessing Route Information

There are several ways to access route information in components:

In Templates

<template>
  <p>Current Path: {{ $route.path }}</p>
  <button @click="$router.push('/about')">Go to About Page</button>
</template>

In Options API

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')  // Programmatic navigation
    }
  }
}

In Composition API

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()  // Router instance
const route = useRoute()    // Current route information

const navigateToAbout = () => {
  router.push('/about')
}
</script>

🎯 Next Steps

Ready to continue? Let's explore more exciting features of Vue Router:

• Dynamic Route Matching - Handling routes with parameters
• Nested Routes - Building complex page layouts
• Navigation Guards - Controlling route access permissions
• Route Lazy Loading - Optimizing application performance

💫 Professional Advice: If you're new to Vue Router, we recommend reading the guide documentation in order to better understand the relationships between different concepts.