VueJS - Routing: A Beginner's Guide to Navigating Your Vue App

Hello there, future Vue masters! Today, we're going to embark on an exciting journey through the world of Vue routing. Think of routing as the GPS of your Vue application - it helps your users navigate from one page to another without actually reloading the entire website. Cool, right? Let's dive in!

What is Vue Routing?

Imagine you're building a house (your Vue app). You wouldn't want your guests to enter through the window every time they want to go to a different room, would you? That's where routing comes in - it's like creating proper doorways between the rooms of your app.

Vue Router is the official routing library for Vue.js. It allows you to map components to different URL paths, creating a smooth, single-page application experience.

Setting Up Vue Router

First things first, let's install Vue Router. Open your terminal and run:

npm install vue-router

Now, let's create a basic router setup:

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

In this setup, we're importing Vue and VueRouter, then telling Vue to use VueRouter. We define our routes in an array, where each route is an object specifying the path, name, and component to render.

Using Router-Link and Router-View

Now that we have our routes set up, how do we use them? Enter <router-link> and <router-view>.

Router-Link

<router-link> is a component that allows users to navigate between pages. It's like a supercharged <a> tag. Here's how you use it:

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

Router-View

<router-view> is where the magic happens. It's a component that displays the content of the route that matches the current URL. Think of it as a placeholder where your components will be rendered.

Props for Router-Link

Router-Link comes with several props that allow you to customize its behavior. Let's look at some of the most common ones:

Prop	Description	Example
to	Specifies the target route	<router-link to="/about">About</router-link>
replace	Navigates without pushing a new history entry	<router-link to="/about" replace>About</router-link>
append	Appends the path to the current path	<router-link to="child" append>Child</router-link>
tag	Specifies what tag to render the component as	<router-link to="/about" tag="li">About</router-link>
active-class	Class to apply when link is active	<router-link to="/about" active-class="active">About</router-link>
exact	Exactly match the route	<router-link to="/" exact>Home</router-link>

Programmatic Navigation

Sometimes, you might want to navigate from within your JavaScript code. Vue Router provides methods for this:

// Go to the About page
this.$router.push('/about')

// Go back
this.$router.go(-1)

// Replace current history entry
this.$router.replace('/about')

Dynamic Route Matching

Often, we need to map routes with the same component but different parameters. For example, a user profile page where the user ID is part of the URL. We can achieve this with dynamic segments in the path:

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

In this example, :id is the dynamic segment. You can access it in your component via this.$route.params.id.

Nested Routes

As your app grows, you might want to nest components inside each other. Vue Router makes this easy:

const router = new VueRouter({
  routes: [
    { 
      path: '/user/:id', 
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

This setup allows for URLs like /user/123/profile and /user/123/posts.

Navigation Guards

Last but not least, let's talk about navigation guards. These are hooks provided by Vue Router to guard navigations either by redirecting or canceling. They're like the bouncers of your app, controlling who gets in and who doesn't.

Here's a simple example of a global before guard:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

This guard checks if the user is authenticated before allowing navigation to any route other than 'Login'.

And there you have it, folks! We've journeyed through the basics of Vue routing, from setting up routes to guarding them. Remember, practice makes perfect, so don't be afraid to experiment with these concepts in your own projects. Happy coding, and may your routes always lead you to where you want to go!

Credits: Image by storyset