How to use Vue.js router and Vue.js components and how they work?

In this tutorial you will learn how the Vue.js router works and how to load Vue.js components when you navigate the Vue.js Router.

Before we start with the tutorial, let understand what are router and components in Vue.js.

What are components in Vue.js?

Components can be considered as extendable HTML elements and are designed to display static HTML. Vue.js allows you to create your own custom HTML element tag which will be translated or rendered as HTML content. The purpose of having components in Vue is for reusable codes. If you have a repeated HTML content, rather than place repeated content on every page or screen, you can just create the HTML content as a component and place the component into the screen. The purpose of this is for easy maintenance, you just need to modify your Vue Components and it will take effect changes applied to all screens. This is an example of a simple component works in Vue.js. Let consider a situation where you need to include a heading title that will welcome a user name. Here is how our first example of component will work.

<div id="heading-title">
	<welcome-component name="Andy"></welcome-component>
</div>

If you see above codes, you may notice unknown HTML element tag named welcome-component. What is actually this element tag? Well, this is called custom HTML element which is known as components in Vue.js. So how do you create this component then? Well, to create a component in Vue.js is pretty simple, you just need to specify the component name, the props or known as component properties which are optional and the element template for the static content. Please see the following JavaScript codes.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('welcome-component', {
	props: ['name'],
	template: '<h5>Hi {{ name }}, welcome to our tutorial website</h5>'
})

new Vue({
  el: '#heading-title'
})
</script>

We simply declare the name of our component in the following code. If you see the following code, I defined the component name as welcome-component. The props is the additional extra parameters or properties where you can use them to pass extra data into the template. In this example, I am using props called name. If you have more than props, simply use the separated comma to include additional props. For example: props: ['name','email']. One thing you have to remember, when entering the content for the template property, you can only have one root parent only, if you have more than one root parent, the remaining root parents will be ignored, for example:

Vue.component('welcome-component', {
	template: '<h1>Root parent 1</h1><h1>Root parent 2</h1><div>Root parent 3</div>'
})

You can see the actual demo works below.

Demo of Vue Components

You can see the following template is generated based on the given above component element tag.

What is router does in Vue.js?

The router acts as a navigator of an app. When you are doing a single page application known as SPA, You can consider a router as navigation menu of a website. It loads some content or data based on the URL given. So how does the router work? Firstly you have to include the following router script library.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>

Once it is done, you can specify the router-link element tag which is to indicate which URL you want to load and you will need to include a router-view element tag on your code. This tag will be used to display the content of the URL data. Please see the following sample code. I have included CSS style for the menu navigation for better display.

<div id="router-app">
  <h1>Sample Vue.js Router</h1>
  <div class='menu-navigation'>
	<router-link to="/menu-1">Menu 1</router-link>
	<router-link to="/menu-2">Menu 2</router-link>
	<router-link to="/menu-3">Menu 3</router-link>
  </div>
  <router-view class='view-content'></router-view>
</div>

<style>
	.menu-navigation > a{
		margin-right:10px;
		border:solid 1px #ccc;
		border-radius:5px;
		padding:5px 10px;
		background:#09498b;
		color:#fff;
		cursor:pointer;
		text-decoration:none;
	}
	
	.view-content{
		margin:20px 0;
	}
</style>

This will be the javascript codes.

const appRoutes = [];

for(var i = 1; i <= 3; i++){
var contentTemplate = {
	template: '<div>Sample content of menu ' + i.toString() + '</div>'
}

var route = {
	path: '/menu-' + i.toString(),
	component: contentTemplate
}
appRoutes.push(route);
}

const router = new VueRouter({
routes : appRoutes
})

const routerApp = new Vue({
router
}).$mount('#router-app');

Demo of Router JS

Please click one of the menu to see the template content is loaded.

When you click the menu button, you will notice there is an extra URL path has been added. This URL path will tell the router script to look into routes configuration array data and see if there is a match URL path, load the related component. If you see the javascript code, I perform a for loop that will add a route configuration data into an array, the actual content itself will look like below if we translated the for loop result.

appRoutes = [
  { path: '/menu-1', component: {template: '<div>Sample content of menu 1</div>'} },
  { path: '/menu-2', component: {template: '<div>Sample content of menu 2</div>'} },
  { path: '/menu-3', component: {template: '<div>Sample content of menu 3</div>'} }
]

For example if the URL path is menu-1, it will then load the content template of menu-1. Pretty simple right, hopefully, this quick and easy tutorial helps you. Post your comment below if you have any question.

Download Files

You can download the above example in html format below.

Download