Hello folks! Welcome back to a new section of our tutorial on Vue.js. In this tutorial post, we will be studying about Vue.js Routing.
Vue.js doesn't have a built-in router feature. We need to follow some additional steps to install it.
Vue.js doesn't have a built-in router feature. We need to follow some additional steps to install it.
Direct Download from CDN
The latest version of vue-router is available at https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com gives npm-based cdn links. The above link is always updated to the current version. We can download and host it, and use it with a script tag along with Vue.js as follows -
Unpkg.com gives npm-based cdn links. The above link is always updated to the current version. We can download and host it, and use it with a script tag along with Vue.js as follows -
<script src = "/path/to/vue.js"></script> <script src = "/path/to/vue-router.js"></script>
Using NPM
Run the following command below to install the vue-router.
npm install vue-router
Using GitHub
We can copy the repository from GitHub as follows -
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router cd node_modules/vue-router npm install npm run build
Example
Let us begin with a simple example making use of vue-router.js.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> <script type = "text/javascript" src = "js/vue-router.js"></script> </head> <body> <div id = "app"> <h1>Routing Example</h1> <p> <router-link to = "/route1">Router Link 1</router-link> <router-link to = "/route2">Router Link 2</router-link> </p> <!-- route outlet --> <!-- component matched by the route will render here --> <router-view></router-view> </div> <script type = "text/javascript"> const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' } const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' } const routes = [ { path: '/route1', component: Route1 }, { path: '/route2', component: Route2 } ]; const router = new VueRouter({ routes // short for `routes: routes` }); var vm = new Vue({ el: '#app', router }); </script> </body> </html>
Output
READ: Vue.js | Directives
To start the routing, we need to add the vue-router file into the code. Take the code from http://www.unpkg.com/vue-router/dist/vue-router.js and save in the file vue-router.js.
The script is added after vue.js as follows -
The script is added after vue.js as follows -
<script type = "text/javascript" src = "js/vue.js"></script> <script type = "text/javascript" src = "js/vue-router.js"></script>
In the body section, there's a router link that is defined as follows -
<p> <router-link to = "/route1">Router Link 1</router-link> <router-link to = "/route2">Router Link 2</router-link> </p>
<router-link> is a component that is used to navigate to the HTML content to be shown to the user. The to property is the destination, i.e the source file where the contents to be displayed will be picked.
In the above piece of code, we have created two router links.
Take a look at the script sections where the router is initialized. There are two constants created as follows -
In the above piece of code, we have created two router links.
Take a look at the script sections where the router is initialized. There are two constants created as follows -
const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }; const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
They've templates, which need to be shown when the router link is clicked.
Next, is the routes const, which defines the path to be displayed in the URL.
Next, is the routes const, which defines the path to be displayed in the URL.
const routes = [ { path: '/route1', component: Route1 }, { path: '/route2', component: Route2 } ];
Routes define the path and the component. The path i.e. /route1 will be displayed in the URL when the user clicks on the router link.
Component takes the templates names to be shown. The path from the routes needs to match with the router link to the property.
For example, <router-link to = "path here"></router-link>
Next, the instance is created to VueRouter using the following piece of code.
Component takes the templates names to be shown. The path from the routes needs to match with the router link to the property.
For example, <router-link to = "path here"></router-link>
Next, the instance is created to VueRouter using the following piece of code.
const router = new VueRouter({ routes // short for `routes: routes` });
The VueRouter constructor takes the routes as the param. The router object is assigned to the main vue instance using the following piece of code.
var vm = new Vue({ el: '#app', router });
Execute the example and see the display in the browser. On inspecting and checking the router link, we will find out that it adds class to the active element as shown in the below screenshot.
The class added is class ="router-link-exact-active router-link-active". The active link gets the class as shown in the above screenshot. Another thing to notice is, the <router-link> gets rendered as a tag.
READ: Vue.js | Rendering
Props for Router Link
Let us look at some more properties to be passed to <router-link>.
to
This is the destination path that is given to the <router-link>. When clicked, the value of to will be passed to router-push() internally. The value needs to be a string or a location object. When utilizing an object, we need to bind it as shown in example 2.
e.g. 1: <router-link to = "/route1">Router Link 1</router-link> renders as <a href = ”#/route”>Router Link </a> e.g. 2: <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link> e.g. 3: <router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.
Output
The following is the output of example 3.
replace
Adding replace to the router link will call the router.replace() instead of router.push(). Via replace, the navigation is not stored.
Example
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>
append
Adding append to the <router-link> is going to make the path relative.
If we want to go from the router link via path /route1 to router link path /route2, it's going to display the path in the web browser as route1/route2.
If we want to go from the router link via path /route1 to router link path /route2, it's going to display the path in the web browser as route1/route2.
Example
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>
tag
At present <router-link> renders as a tag. If we want to render it as some other tag, we need to specify the same making use of tag ="tagname";
Example
<p> <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link> <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link> </p>
We have specified the tag as span and this is what is displayed in the browser.
The tag displayed now is a span tag. We are still going to see the click going as we click on the router link for navigation.
active-class
By default, the active class added when the router link is active is router-link-active. We can overwrite the class by setting the same as shown in the following piece of code.
<style> ._active{ background-color : red; } </style> <p> <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link> <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link> </p>
Output
The class utilized is active_class ="_active". Following is the output displayed in the web browser.
exact-active-class
The default exactactive class applied is router-link-exact-active. We can overwrite it using exact-active-active.
Example
<p> <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link> <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link> </p>
Output
This is what is displayed in the browser.
event
Currently, the default event for router-link is click event. We can change the same using the event property.
Example
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
Now, when we mouseover the router link, it will navigate as shown in the following web browser. Mouseover on the router link 1 and we will see the navigation changing.
READ: Vue.js | Binding
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Mixins.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.