Interesting Routing example in Vue js

Let us create interesting routing example in vue js,Create Home,MyProfile,MyContact,AboutMe and Dashboard links.
Come lets create routing example step by step:-
Note:If you have not seen the installation of router in vuejs.please go to the below link and have an idea about the installation of router in vuejs.
Installation of Router in vuejs
Step 1:

Step 2:

Step 3:

Step 4: Go to App.Vue and change the following.

                        <template>                   
                             <router-link to="/">  Home<router-link>|
                             <router-link to="/dashboard">Dashboard <router-link> |
                             <router-link to="/myprofile">MyProfile <router-link> |
                             <router-link to="/contact">Contact <router-link> |
                             <router-link to="/about">About <router-link>    
                         <router-view >
                        <template>

Step 5: Go to Router--> Index.js and add extra routes at the top.

                           import Contact from "../views/contact.vue";
                           import Dashboard from "../views/Dashboard.vue";
                           import MyProfile from "../views/MyProfile.vue";
                        const routes = [
                                          {
                                            path: "/",
                                            name: "Home",
                                            component: Home,
                                          },
                                          {
                                            path:"/contact",
                                            name:"Contact",
                                            component:Contact
                                          },
                                          {
                                            path:"/dashboard",
                                            name:"Dashboard",
                                            component:Dashboard
                                          },
                                          {
                                            path:"/myprofile",
                                            name:"MyProfile",
                                            component:MyProfile
                                          }
                                      ];

Step 6: Finally we see the output like this,

Step 7: Dashboard,

Step 8: My Profile,

Step 9: My Contact,

Happy Vue Coding !!!