Vue Router is a game-changer for building single-page applications (SPAs) with Vue.js. It allows us to create smooth, seamless navigation between different views without the need for full page reloads. As someone who’s worked on countless Vue projects, I can tell you that Vue Router is an absolute must-have in your toolkit.
Let’s dive into the basics of Vue Router and see how it can transform your Vue applications. We’ll start by setting up a simple project and then gradually build it up to showcase the power of Vue Router.
First things first, let’s create a new Vue project using the Vue CLI. Open up your terminal and run:
vue create vue-router-demo
cd vue-router-demo
Once your project is set up, we need to install Vue Router. Run the following command:
npm install vue-router@4
Now that we have Vue Router installed, let’s create a simple application with three views: Home, About, and Contact. Create three new files in your src/components directory:
touch src/components/Home.vue
touch src/components/About.vue
touch src/components/Contact.vue
Let’s add some basic content to each of these components. Open up Home.vue and add the following:
<template>
<div class="home">
<h1>Welcome Home!</h1>
<p>This is the home page of our Vue Router demo.</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
For About.vue:
<template>
<div class="about">
<h1>About Us</h1>
<p>Learn more about our company and mission.</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
And for Contact.vue:
<template>
<div class="contact">
<h1>Contact Us</h1>
<p>Get in touch with our team.</p>
</div>
</template>
<script>
export default {
name: 'Contact'
}
</script>
Now that we have our components ready, it’s time to set up Vue Router. Create a new file called router.js in your src directory:
touch src/router.js
Open up router.js and add the following code:
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
This code sets up our router with three routes, each corresponding to one of our components. The createWebHistory() function tells Vue Router to use the browser’s History API for navigation, which gives us nice, clean URLs.
Now, let’s update our main.js file to use the router:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
Finally, we need to update our App.vue file to use the router. Replace the contents of App.vue with the following:
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/contact">Contact</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
This setup creates a navigation bar with links to our different views, and the <router-view></router-view> component acts as a placeholder where Vue Router will render the appropriate component based on the current route.
Now, if you run your application with npm run serve, you should see a simple SPA with working navigation between the Home, About, and Contact pages. Pretty cool, right?
But wait, there’s more! Vue Router has a ton of powerful features that can make your SPAs even more dynamic and user-friendly. Let’s explore some of these features.
One of the most useful features of Vue Router is the ability to pass parameters to routes. This is perfect for creating dynamic pages, like a user profile or a product details page. Let’s add a new route that accepts a parameter.
First, create a new component called UserProfile.vue:
<template>
<div class="user-profile">
<h1>User Profile</h1>
<p>Welcome, {{ $route.params.username }}!</p>
</div>
</template>
<script>
export default {
name: 'UserProfile'
}
</script>
Now, let’s add this new route to our router.js file:
import UserProfile from './components/UserProfile.vue'
// ... existing code ...
const routes = [
// ... existing routes ...
{ path: '/user/:username', component: UserProfile }
]
With this setup, you can now navigate to /user/johndoe or /user/janedoe, and the UserProfile component will display the appropriate username.
Another powerful feature of Vue Router is nested routes. These are perfect for creating complex layouts with multiple levels of navigation. Let’s add a nested route to our About page.
First, create two new components: AboutCompany.vue and AboutTeam.vue:
<!-- AboutCompany.vue -->
<template>
<div class="about-company">
<h2>Our Company</h2>
<p>Learn about our company's history and mission.</p>
</div>
</template>
<script>
export default {
name: 'AboutCompany'
}
</script>
<!-- AboutTeam.vue -->
<template>
<div class="about-team">
<h2>Our Team</h2>
<p>Meet the amazing people behind our success.</p>
</div>
</template>
<script>
export default {
name: 'AboutTeam'
}
</script>
Now, let’s update our About.vue component to include these nested routes:
<template>
<div class="about">
<h1>About Us</h1>
<nav>
<router-link to="/about/company">Company</router-link> |
<router-link to="/about/team">Team</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
Finally, update the router configuration in router.js:
import AboutCompany from './components/AboutCompany.vue'
import AboutTeam from './components/AboutTeam.vue'
// ... existing code ...
const routes = [
// ... existing routes ...
{
path: '/about',
component: About,
children: [
{ path: 'company', component: AboutCompany },
{ path: 'team', component: AboutTeam }
]
}
]
Now, when you navigate to /about, you’ll see additional navigation options for Company and Team, with the content changing dynamically within the About page.
Vue Router also provides programmatic navigation, which is super handy when you need to navigate based on user actions or application logic. You can use the router.push() method to navigate to a new route. Let’s add a button to our Home component that takes us to a random user profile:
<template>
<div class="home">
<h1>Welcome Home!</h1>
<p>This is the home page of our Vue Router demo.</p>
<button @click="goToRandomUser">Visit Random User</button>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
goToRandomUser() {
const users = ['alice', 'bob', 'charlie', 'david'];
const randomUser = users[Math.floor(Math.random() * users.length)];
this.$router.push(`/user/${randomUser}`);
}
}
}
</script>
This button will navigate to a random user profile when clicked. It’s a simple example, but it demonstrates how you can use Vue Router to create dynamic, interactive navigation in your app.
One more feature that’s worth mentioning is route guards. These are incredibly useful for controlling access to certain routes based on conditions you define. For example, you might want to prevent unauthorized users from accessing certain pages. Let’s add a simple route guard to our UserProfile route:
// in router.js
const routes = [
// ... existing routes ...
{
path: '/user/:username',
component: UserProfile,
beforeEnter: (to, from, next) => {
const authorizedUsers = ['alice', 'bob', 'charlie', 'david'];
if (authorizedUsers.includes(to.params.username)) {
next(); // allow navigation
} else {
next('/'); // redirect to home page
}
}
}
]
This guard checks if the username in the route is in our list of authorized users. If it is, the navigation proceeds; if not, the user is redirected to the home page.
Vue Router is an incredibly powerful tool that can help you create complex, dynamic single-page applications with ease. We’ve only scratched the surface of what’s possible here, but I hope this gives you a good starting point for exploring Vue Router in your own projects.
Remember, the key to mastering Vue Router (or any technology, really) is practice. Try building different types of routes, experiment with nested routes and route parameters, and don’t be afraid to dig into the documentation for more advanced features. Before you know it, you’ll be creating sophisticated SPAs that are a joy to use and maintain.
Happy coding, and may your routes always lead you to where you want to go!