Setting up Router
There isn’t an inbuilt router feature in VueJs, so we have to set it up by following some additional steps.Direct Download from CDN
For downloading the latest version of vue-router, you can visit https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
For the latest npm-based cdn links, you should visit unpkg.com. The link provided above always has the newest version. You can download and host it and can use it with a script tag in vue js as below:
<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>
Using NPM
To install the vue router, run the following command:
npm install vue-router
Using Github
To clone the repository from GitHub, follows the steps stated below:
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build
Let’s start with an example
Example:
The main HTML code will look something like this:
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue-router.js">
</script>
<script type = "text/javascript"
src = "js/vue.js">
</script>
</head>
<body>
<div id = "app">
<h1>Examples of Routing</h1>
<p>
<router-link to = "/route1">1st Router Link</router-link>
<router-link to = "/route2">2nd Router Link </router-link>
</p>
<!-- route outlet -->
<!-- The component which are matched by route are visible here -->
<router-view></router-view>
</div>
<script type = "text/javascript">
const Route1 = { template: '<div style = "border-radius:20px;background-color:green;height:50px;width:200px;margin:10px;font-size:25px;padding:10px;"> router 1</div>' }
const Route2 = { template: '<div style = "border-radius:20px;background-color:cyan;margin:10px;width:200px;height:50px;font-size:25px;padding:10px;"> 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
Take the code from https://unpkg.com/vue-router@3.0.1/dist/vue-router.js, create a vue-router.js file, and copy the code in that file and save it.
After vue js the script is added as follows:
<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>
A router link is defined in the body section:
<p>
<router-link to = "/route1">Router Link 1</router-link>
<router-link to = "/route2">Router Link 2</router-link>
</p>
The route defines the paths and components. When the user clicks on the router link, URL '/route1' will be displayed.
The router link needs to be matched with the path from the routes. The template's name to be displayed is taken by components.
Example:
<router-link to = "path here"></router-link>
Next route is created in VueRouter
const router = new VueRouter({
routes // short for `routes: routes`
});
The constructor of VueRouter takes routes as the param. The router object assigns the main value instance.
var vm = new Vue({
el: '#app',
router
})
Check out most important Git Interview Questions here.
Props for Router Link
We will learn about some of the more properties passed to <router-link>.
To
It refers to the destination path given to <router-link>. The value of to is passed internally to the router.push() when clicked. The value needs to be a location object or string. We need to bind the object when using it.
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.
name= Tery in the url is the part of the query string
Replace
The router.replace() function is called when replace is added in the router link. The navigation history is not stored with replace.
<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}" replace>Router Link 1</router-link>
Append
It will make the path relative when you add append to the <router link>. If we want to go from route1 to route2 then it will show as route1/route2.
<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>
Tag
Presently <router-link> is rendered as a tag but if you want to render it as some other tag can use by specifying tag=”Tagname”.
<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>
Active-class
router-link-active is the default active class when router link is active. We can change this by following the code below:
<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>
Event
Click event is the default event for router-link. By event property, we can change the same.
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>
FAQs
-
What are the advantages of using Vuejs?
It is small in size, easy to understand, simple integration, components, flexibility.
-
Does Vuejs have an inbuilt router feature?
No, Vuejs doesn't have an in-built router feature.
-
What is the default active class in the router link?
router-link-active is the default active class in the router link.
-
State one advantage of routing?
It allows us to move between different pages without refreshing the main page.
Key Takeaways
We have learned about routing in Vuejs in this blog and its advantages. We have also known about setting up the router by various methods and props for router links.
If you want to learn about change detection caveat in vue2 then you must have a look here.
34+ registered 
