Hello there, amazing web developers! 🖐️ Today, we are about to explore the core of Vue.js 3's routing tool known as Vue Router. We'll be discussing, learning, and navigating Vue Router from the basics to the advanced. 🚀 So, grab a refreshing drink and let's get started! 🥤 Vue Router is the official router for Vue.js 3 that provides a way to route your Single Page Applications (SPAs). It's designed according to HTML5 pushState API, allowing you to build user-friendly and highly responsive web apps. 😃
Setting Up a Vue.js 3 Project 🖥️
To kick things off, let's start by setting up a new Vue.js 3 project: vue create vue-navigation Hit enter and select the default setup by typing "default".
Installing Vue Router 📦
Now, navigate to your new vue app: cd vue-navigation Then, let's install the Vue Router package: npm install vue-router@next With Vue Router installed successfully, it's time to start the fun. 🧙♂️
Creating Your First Route 🛣️
Go to the src folder and create a router folder. Inside the router folder, create a index.js file and let's define some routes.
import { createRouter, createWebHistory } from "vue-router";
import Dashboard from "@/views/Dashboard.vue";
import Profile from "@/views/Profile.vue";
const routes = [
{
path: "/",
name: "Dashboard",
component: Dashboard
},
{
path: "/profile",
name: "Profile",
component: Profile
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
In the code above, we have created two routes: "/" (Dashboard) and "/profile" (Profile). We need to create Dashboard.vue and Profile.vue in a views folder in the src directory. And Voila! 💥 You've just created your first routing with Vue Router. Easy, isn't it? 😄
Linking Routes 🔗
Vue Router provides a
<template>
<div id="nav">
<router-link to="/">Dashboard</router-link> |
<router-link to="/profile">Profile</router-link>
</div>
</template>
And there you have it! We've just linked our routes together! 🎉
Remember, use
Exploring Nested Routes and Route Parameters 🚀
Now that we've covered the basics, let's dive into some advanced concepts. Vue Router allows us to create nested routes and use route parameters.
Nested routes are useful when you want to display different components based on the route, but keep some parts of the UI the same. For example, you might have a user profile page with nested routes for 'Posts', 'Followers', and 'Following'.
Route parameters allow us to create dynamic routes. For example, you might have a blog and want to create a route for each post. Instead of creating a route for each post manually, you can use a route parameter to dynamically generate the routes.
Here's an example of how to create nested routes and use route parameters:
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
path: 'posts',
component: UserPosts
},
{
path: 'followers',
component: UserFollowers
},
{
path: 'following',
component: UserFollowing
}
]
}
]
There's a lot more to explore about Vue Router from handling dynamic routes to navigation guards, but we'll save that for another day. Hope you've enjoyed this journey into Vue Router as much as we did developing with Vue.js 3. 😄
For those willing to dive deeper into Vue Router, you might find these resources helpful:
- Official Vue Router Documentation
- Vue.js 3 documentation
- A Beginner's Guide HTML5 pushState API
Remember, technology evolves quickly and over time, links may become outdated. So, always look out for latest updates and discussions in Vue.js community.
Until next time, Happy coding! 👨💻
