Vue.js Routing

Vue.js doesn’t have an inbuilt router function. If we want to use routing in vue.js, it is required to install the Vue router using NPM and CDN. The following are the steps to install the Vue router.

Using CDN

We can get the latest version of the vue-router from this https://unpkg.com/vue-router/dist/vue-router.js link. The unpkg.com provides the NPM based CDN link to install the Vue router in the system. This link can also allow us to update the latest version of it. We can download and host the router, then use this router with the script tag and the Vue.js. If we install the vue-router using CDN, use the following script tags:

<script src = "/path/to/vue.js"></script>
 <script src = "/path/to/vue-router.js"></script> 

Using NPM

Let us see how we can install the vue-router by using the NPM. To install the vue-router, we use the following command in the command prompt:

npm install vue-router

Using GitHub

By using the GitHub, we can clone the repository as follows:

git clone https://github.com/vuejs/vue-router

cd node_modules/vue-router
 npm install
 npm run build 

Now, let’s take a simple example to see how the Vue router works in the Vue.js application.

Example: This example explains how we can use the Vue router in the Vue application.

Index.html

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Vue.js Routing</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script> 
 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
 <body>
 <div id="app">
 <h1>Hello this is an example of Vue.js Router!</h1>
 <p>
 <router-link to="/router1">Go to Router1</router-link> 
 <router-link to="/router2">Go to Router2</router-link>
 </p>
 <!-- route outlet -->
 <!-- component matched by the route will render here -->
 <router-view></router-view>
 </div>
 </body>
 </html> 

Main.js

const Router1 = {template: '<div style = "border-radius:25px;background-color:green;width:175px;height:60px;margin:12px;font-size:25px;padding:10px;">This is Router1 Example</div>' }
 const Router2 = {template: '<div style = "border-radius:20px;background-color:red;width:175px;height:60px;margin:12px;font-size:25px;padding:10px;">This is Router2 Example</div>' }
 const routes = [
 { path: '/router1', component: Router1 },
 { path: '/router2', component: Router2 } 
 ]
 const router = new VueRouter({
 routes // short for `routes: routes`
 })
 var vm =  new Vue({
 el: '#app',
 router 
 }) 

Output: After executing this code, we will get output, as shown below:

Vue.js Routing

When we click on the “Router 1” or “Router 2”, it navigates to that router where we want to go, as shown below:

Vue.js Routing
Vue.js Routing

To start the routing, it is required to add the vue-router.js file. Take the code from https://unpkg.com/vue-router/dist/vue-router.js link and then add it into the html file.

The script tag is added after the vue.js, as shown below:

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

Use the <router-link> component in the body section of the Html file. The router-link is a Vue component used to navigate to the content of Html that will be shown to the user. The <router-link> is used in the tag form, as given below.

<router-link to="/router1">Go to Router1</router-link>
 <router-link to="/router2">Go to Router2</router-link> 

Properties of Router Link

There are various properties of the router link that are very useful in the Vue.js application. Some of the essential properties of the router link are as follows:

  • to (Type: String): It denotes the destination path of the router link. When this router link clicked, the value of this prop will be passed internally to router.push(). The value may be a location descriptor object or a string.

Example:

<router-link to="/router1">Go to Router1</router-link>

Output:

Vue.js Routing

In the above screenshot, we can see that the path of the localhost is http://localhost:8080/#/router1 that shows the location of the router.

  • Replace (Type: Boolean): When we add the replace() prop, it will instantly call the router.replace() property instead of the router.push() property. With the replace() prop, the navigation will not store the history record.

Example:

<router-link to= “{ path: ‘/xyz’}” replace></router-link>
  • Append (Type: Boolean): When we add the append property, it will always append the relative path to the current path. For example, if we want to navigate from the router link to /path1 to the relative link to /path2, it will display the path of the router link in the browser as /path1/path2.

Example:

<router-link to= “{ path: ‘relative/path’}” append></router-link>
  • Tag (Type: string): Currently <router-link> presents as a tag form. If we want to render the <router-link> as another tag like <li> and <span>, then we can use the tag property to render as a new tag using tag="tag name".

     Example: Here, the tag is specified as “li”. Now, we are going to execute the code and see the output:

<p>
 <router-link v-bind:to = "{path: '/router1'}" tag = "li">Go to Router1</router-link>
 <router-link v-bind:to = "{path: '/router2'}" tag = "li">Go to Router2</router-link>
 </p> 

Output: After executing this code, we will get the output, as shown below:

Vue.js Routing

In the above screenshot, we can see that the tag is displayed as “li” tag.

active-class (Type: string): When the router-link active, configure the active CSS class. Also, the default active class value can be set globally through the linkActiveClass router constructor.

Example:

<style>
 ._active{
 background-color : blue       }
 </style>
 <p>
 <router-link v-bind:to = "{path: '/router1'}" active-class = "_active">Go to Router1</router-link> 
 <router-link v-bind:to = "{path: '/router2'}" tag = "li">Go to Router2</router-link>
 </p> 
  • event (Type: string): The click event is the router-link to the default event. Specify the event(s) that can trigger the navigation to the link.

Example:

<router-link v-bind:to = "{path: '/router1'}" event= "mouseover">Go to Router1</router-link>
 <router-link v-bind:to = "{path: '/router2'}" tag = "li">Go to Router2</router-link> 

Output: After executing this code, we will get the output, as shown below:

Vue.js Routing

When we mouseover on the router link, it will navigate to the router. In the above screenshot, the mouseover on the router1 and we will see that the navigation is changed.

  • exact-active-class (Type: string): When the router-link active with the exact match, set the active CSS class. Also, the default active class value can be set globally through the linkExactActiveClass router constructor.

Example:

<router-link v-bind:to ="{path: '/router1'}" exact-active-class ="_active">Go to Router1</router-link>
 <router-link v-bind:to = "{path: '/router2'}" tag = "li">Go to Router2</router-link>