Introduction to Vue.js Vue Router

Vue Router is the official routing library for Vue.js, and it allows you to create complex, dynamic web applications by enabling navigation between different pages or views without full-page refreshes. In this guide, we'll explore how to set up and use Vue Router for navigating between pages in your Vue.js application.

Setting Up Vue Router

To use Vue Router, you need to include it in your project. You can include Vue Router via a CDN or use a package manager like npm. Here's an example of including Vue Router using a CDN:

<script src=""></script>
<script src=""></script>

Make sure to include both Vue.js and Vue Router in your HTML file.

Configuring Vue Router

Once Vue Router is included, you need to configure it by defining your routes. Routes map URL paths to components. Here's an example of configuring Vue Router:

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({
}); new Vue({
el: '#app',

In this example, we define two routes, one for the home page and one for the about page. The `router` object is created with these routes, and it's attached to the Vue instance.

Navigation Links

To navigate between pages, you can use the `` component. It's similar to an anchor (``) element, but it's specifically designed for Vue Router. Here's an example:

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

The `` components provide links to the home and about pages, and the `` component displays the matched component based on the current route.


Vue Router simplifies page navigation in your Vue.js applications. With Vue Router, you can create dynamic, multi-page applications without the need for full-page reloads, enhancing the user experience and making your application more interactive.