Post
Ask Question

Routing In Vue.js

Introduction

 
In a single page application, routing is used to move from one page to another page. In technical terms, we are moving from one component to another component.
 
Before start routing concept, let me explain the basic concepts needed to implement routing,
 
In Vue. Js a single component contains three parts,
  1. Template
  2. Scripts
  3. Styles.
In template we will define our html content.

In scripts we will write our logic & API Calls.This is a class component.

In Styles we will write css code specific to each components.
 
Here we are going to create Vue Js project using Vue CLI. Vue CLI is used to run Vue js commanda with short form .
 
To install Vue CLI use the    below command,
 
npminstall -g @vue/cli
 
Now once it's completed we will start creating our first VUE projects.
 
vue create myfirstvueapp
 
This will create a Vue project with all the necessary files included. Currently if you are trying to create, by default Vue Version 3 will be installed.
 
Most other dependent npm packages support Vue version 2.6. Hence before installing consider the requirements.
 
vue-router
 
Once the project is created we need to install vue-router which will be used to make function of routing in Vue Js.
 
To install Vue router please execute the below command.
 
Npm install vue-router -save
 
Now we are ready to  start creating components in Vue js to route from one page to another page, which means move from one component to another component.
 
Here I am not going to explain the files which have been installed already.
 
routercomponents
 
First create routercomponents folder in side src folder.
 
Insider the routercomponents folder we will create two components, namely routes 1 and routes 2.
 
To create that, create new file inside routercomponents folder and name the file as Route1.vue.
 
Write below inside Route1.vue,
  1. <template>  
  2. <h1>i am from route 1</h1>  
  3. </template>  
  4. <script>  
  5.    export default {  
  6.       name: "Route1",  
  7.    };  
  8. </script>   
As I mentioned earlier in single page having template and script. Style is optional.I given the compoenent(page) name as Route 1.Similarly please create another new file inside routercomponents folder and name it as Route2.vue.
 
Place the below code in Route2.Vue,
  1. <template>  
  2. <h1>i am from route 2</h1>  
  3. </template>  
  4. <script>  
  5.    export default {  
  6.       name: "Route2",  
  7.    };  
  8. </script>   
Now we have two components .So we have to create routes for these components. Normally we can create routes in App.vue files itself. If you have very complex routes or more routes then we can create routes in different files & import the routes in main.js.
 

Create Route File 

 
Here we are creating route file separately – to DO that . create router.js file directly under src folder.
 
In Router.js file write the below line of code.
  1. import Route1 from ". /routercomponents/Route1";  
  2. import Route2 from ". /routercomponents/Route2";  
  3. import {  
  4.     createWebHistory,  
  5.     createRouter  
  6. } from "vue-router";  
  7. const routes = [{  
  8.     path: "/route1",  
  9.     name: "route1",  
  10.     component: Route1,  
  11. }, {  
  12.     path: "/route2",  
  13.     name: "route2",  
  14.     component: Route2,  
  15. }, ];  
  16. const router = createRouter({  
  17.     history: createWebHistory(),  
  18.     routes,  
  19. });  
  20.   
  21. export default router;  
  1. First we are importing createWebHistory, createRouter from vue-router.
  2. Create const array routes & mention all the routes inside the array
  3. Assign routes inside create router method. Create webhistory used to track the route. Currently we are not using it.

Each routes contains three parts

 
Path
 
The name we type in the url like http://www.google.com/home (here home is the path for us)
 
Component
 
It’s the name of the component's route we define. We define the name inside Route1 component in:
  1. export default {  
  2.    Name : Route1  
  3. }  
Name
 
Name of the routes can be any name.
 
Now we created the route file. Then the next steps is application to understand , these are routes . for that we will import these routes inside main.js
 
In main.js write below line of code,
  1. import { createApp } from 'vue'  
  2. import App from './App.vue'  
  3. import router from './router.js' // <---  
  4. create App(App).use(router).mount('#app')   
Calling Routes 
 
Now we are going to call the routes. To do that we will create one new component.
 
Create one new folder, Header, under the folder SRC.
 
Inside Header folder create new file Header.vue and write the below line of code,
  1. <template>  
  2.     <div>  
  3.         <h1>Routing Example</h1>  
  4.         <p>  
  5.             <router-linkto="/route1">Router1  
  6.             </router-link>  
  7.             <router-linkto="/route2">Router2  
  8.             </router-link>  
  9.         </p>  
  10.     </div>  
  11. </template>  
  12. <script>  
  13.    exportdefault {  
  14.     name: "Header",  
  15.     data() {  
  16.         return {};  
  17.     },  
  18.     methods: {},  
  19.     components: {},  
  20. }; <  
  21. /script> <  
  22. stylescoped >  
  23.     nav {  
  24.         background - color: black;  
  25.         overflow: hidden;  
  26.         color: white;  
  27.     }  
  28. navul {  
  29.     list - style: none;  
  30.     padding: 0;  
  31.     margin: 0;  
  32. }  
  33. navulli {  
  34.     float: left;  
  35. }  
  36. navlia {  
  37.     color: white;  
  38.     display: block;  
  39.     text - align: center;  
  40.     padding: 16 px;  
  41.     text - decoration: none;  
  42. }  
  43. navlia: hover {  
  44.         background - color: #2c3e50;  
  45. }  
  46. </style>  
Here the main part is router link. If any mismatch happens this will not work. Here we give the path in ‘to ‘ attribute.
  1. <router-linkto="/route1">Router1</router-link>  
  2. <router-linkto="/route2">Router2</router-link>   
Finally we have to provide where the route should load the page.
 
For this write the below line of code in App.vue inside <template> …. </template>
  1. <router-view></router-view>  
Now our all the code change is done. To run the application please type the command,
 
Npm run serve.
 
If it's successful then the below message will come.
 
DONE Compiled successfully in 2441ms 2:01:44 PM
 
App running at, 
  • Local: http://localhost:8080/
  • Network: http://192.168.1.8:8080/
Then open the url http://localhost:8080/
 
Output

Conclusion

 
In this article we saw simple routing. In the next article we will check how we will use routing inside navigation bar.


Similar Articles