Vue Router with Vite: Navigate Your Vue.js Application Effortlessly 🚀

Welcome to this comprehensive guide on using Vue Router with Vite! In this lesson, we'll explore how to create single-page applications (SPAs) with ease, navigating between different views and pages using routing.

By the end of this tutorial, you'll have a solid understanding of Vue Router and be able to apply these skills to your own projects. Let's dive in! 🏊‍♂️

What is Vue Router? 💡

Vue Router is the official routing solution for Vue.js, enabling you to manage multiple views (or pages) within a single-page application. It helps in organizing your application, improving performance, and facilitating user navigation.

Setting Up Vue Router with Vite 🚀

First, let's install Vue Router by running the following command in your terminal:

bash

npm install vue-router

Next, import Vue Router in your main.js file:

javascript

import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

Now, create a new router instance:

javascript

const router = new VueRouter({
  routes: []
})

Defining Routes 📝

Routes in Vue Router specify how different URL paths should be handled within our application. Each route consists of a path, a component, and an optional set of meta options.

Here's an example of defining a simple route:

javascript

const Home = { template: '<div>Home Page</div>' }
const About = { template: '<div>About Page</div>' }

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

const router = new VueRouter({
  routes
})

In the above example, we have defined two routes: one for the home page (path: '/') and another for the about page (path: '/about').

Navigation in Your Vue App 🎯

Now that we have our routes set up, let's learn how to navigate between them. We'll create a router-link component, which acts like an anchor tag but navigates to a specific route when clicked:

html

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

In the above example, we have created links to our home and about pages. router-view is a placeholder where the corresponding component for the current route will be rendered.

Dynamic Routes 💡

Dynamic routes allow us to create URLs that can change based on user input or data. Here's an example of a dynamic route:

javascript

const BlogPost = { template: '<div>Blog Post: {{ $route.params.id }}</div>' }

const routes = [
  { path: '/blog/:id', component: BlogPost }
]

In this example, we've defined a dynamic route for a blog post where the :id can be replaced with any value in the URL. When navigating to /blog/123, the BlogPost component will display "Blog Post: 123".

Navigating Programmatically 🎯

Sometimes, we might need to navigate programmatically instead of using router-link. We can achieve this using the $router and $route properties:

javascript

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

In the above example, we have created a goToAbout method that programmatically navigates to the about page.

Nested Routes 💡

Nested routes help us structure our application with multiple levels of views. Here's an example of defining nested routes:

javascript

const Home = { template: '<div>Home Page</div>' }
const About = { template: '<div>About Page</div>' }
const Contact = { template: '<div>Contact Page</div>' }

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

In this example, we have created a nested structure for our home page, with routes for the about and contact pages.

Wrapping Up ✅

Congratulations on mastering the basics of Vue Router with Vite! Now you can create and navigate between multiple views in your single-page applications.

Remember to practice and experiment with different routing scenarios to solidify your understanding. Happy coding! 🚀

Here's a complete working example with two routes and a simple navigation:

javascript

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>Home Page</div>' }
const About = { template: '<div>About Page</div>' }

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

const app = new Vue({
  router,
  el: '#app'
})

html

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