What are the steps to use Vue router and give an example?

It is easy to integrate vue router in the vue application.

Let us see the example with step by step instructions.

Step 1: Configure router link and router view in the template

   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

   <div id="app">
     <h1>Welcome to Vue routing app!</h1>
     <p>
       <!-- use router-link component for navigation using `to` prop. It rendered as an `<a>` tag -->
       <router-link to="/home">Home</router-link>
       <router-link to="/services">Services</router-link>
     </p>
     <!-- route outlet in which component matched by the route will render here -->
     <router-view></router-view>
   </div>
   

Step 2: Import Vue and VueRouter packages and then apply router

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

   Vue.use(VueRouter)
   

Step 3: Define or import route components.

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

Step 4: Define your route where each one maps to a component

   const routes = [
     { path: '/home', component: Home },
     { path: '/services', component: Services }
   ]
   

Step 5: Create the router instance and pass the routes option

   const router = new VueRouter({
     routes // short for `routes: routes`
   })
   

Step 6: Create and mount the root instance.

   const app = new Vue({
     router
   }).$mount('#app')
   

Now you are able to navigate different pages(Home, Services) with in Vue application.

****