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="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.2/dist/vue-router.js"></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:

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

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>
    <router-view></router-view>
</div>