Vue Router

For most single-page applications (SPAs), we need a way to navigate users to different parts of the application without refreshing the entire page. Vue Router is Vue.js's official routing manager, deeply integrated with Vue's core, making it easy to build SPAs with routing functionality.

Installation

If you chose to add Vue Router when creating your project with create-vue, then everything is already configured for you. If not, you can manually install it:

npm install vue-router@4

Then, you need to create a router instance and mount it onto the Vue application.

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // Lazy loading routes
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

src/main.js

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

const app = createApp(App)

app.use(router) // Tell the Vue application to use the router instance

app.mount('#app')

Core Concepts

1. router-link

router-link is a component used for declarative navigation. It renders as an <a> tag with the correct href. When a user clicks it, it calls router.push() internally, thus changing the URL without reloading the page.

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
</template>

2. router-view

router-view is a functional component that renders the view component that matches the path. You can place it anywhere to adapt to your layout.

<template>
  <header>
    <!-- Navigation links -->
  </header>

  <main>
    <!-- Router outlet -->
    <!-- The route-matched component will render here -->
    <router-view />
  </main>
</template>

3. Dynamic Route Matching

We often need to map all routes matched by a certain pattern to the same component. For example, we might have a User component that should be used to render all users with different IDs. We can achieve this by using dynamic segments in the path:

const routes = [
  // Dynamic segments start with a colon
  { path: '/users/:id', name: 'user', component: User }
]

Now, URLs like /users/johnny and /users/jolyne will both map to the same route.

Inside the component, you can access these dynamic segments through $route.params.

User.vue

<template>
  <div>User ID: {{ $route.params.id }}</div>
</template>

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

// In the Composition API, it's recommended to use the useRoute function
const route = useRoute()
const userId = route.params.id
</script>

4. Route Lazy Loading

When building an application, the JavaScript bundle becomes very large, affecting page loading. If we can split code for different routes into separate chunks, then load the corresponding component only when the route is accessed, it's more efficient. Vue Router supports this "lazy loading" mechanism.

const routes = [
  {
    path: '/about',
    name: 'about',
    // Use dynamic import() syntax to implement lazy loading
    component: () => import('../views/AboutView.vue')
  }
]

This way, the AboutView.vue component will be packaged as an independent chunk and will only be loaded when the user accesses the /about path.