How To Create Routing In VueJs

Vue Router is officially already routes of vue.js. It is deeply integrated with cores and makes it into a single-page application.

Routes will help to make a single page application and it will engage each components with each other without refreshing the page.

It will redirect to other components without refreshing any page also the components will keep changing based on Routes.

So In this post, we will learn how to use Routes in Vue.js application and How to make a single routing file and register all components there.

Step 1: Create Vue project

The below link will help you to create a vue project in your local system. Create vue Project

If you already created a vue project in your system then skip this step and direct start from the second step.

Step 2: Route npm Install

Install route dependency in vue project. This will include routes dependency in your project.

npm install vue-router --save

It will take up to two minutes for installing.

Step 2: Make TopMenu.vue Component

Here make some components, So I can link each component with the menu and make connections to all components using routes. All the components are given below just for example purposes.

<router-link to="/" class="nav-link">Home</router-link> Here in router link to="/" In "TO" add your router name by clicking you want redirect or want to show the component.

src/components/TopMenu.vue

<template>
    <div class="hello">
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item"><router-link to="/" class="nav-link">Home</router-link></li>
                    <li class="nav-item"><router-link to="/registration" class="nav-link">Registration</router-link></li>
                    <li class="nav-item"><router-link to="/contact" class="nav-link">Contact</router-link></li>
                </ul>
            </div>
        </nav>
    </div>
</template>
    
<script>

export default {

    name: 'TopMenu',
}

</script>
    
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    h3 {
        margin: 40px 0 0;
    }
    ul {
        list-style-type: none;
        padding: 0;
    }
    li {
        display: inline-block;
        margin: 0 10px;
    }
    a {
        color: #42b983;
    }

</style>

Step 3: Make HomeDashbaord.vue Component

src/components/HomeDashbaord.vue

<template>
    <div>
        <h1>This is Your Home page.</h1> 
    </div>
</template>
    
<script>

export default {

    name:'HomeDashbaord'
}
</script>

Step 4: Make RegistrationForm.vue Component

src/components/RegistrationForm.vue

<template>
    <div>
        <h1><b>This will be your registration form</b></h1>
    </div>
</template>

<script>

export default {

    name:'RegistrationForm',
}
</script>

Step 5: Make ContactForm.vue Component

src/components/ContactForm.vue

<template>
    <div>
        <h1>This is your contact form</h1> 
    </div>
</template>

<script>

export default {

    name:'ContactForm',
}
</script>

Step 6: Import Menu Component

This is my main component file where the main layout of the project stay same for whole project that all components will import here.

i. e: Header, Footer, Sidebar, Menu, Category etc...

In this file i have made my menu in the TopMenu components, That's why i importing that components in App.vue.

<router-vue></router-view> is the tag which will be provided vue-router by installing npm, That will help to show all components from URL.

src/App.vue

<template>
    <div id="app">
        <TopMenu />
        <router-view></router-view>
    </div>
</template>
    
<script>

import TopMenu from './components/TopMenu.vue'
    
export default {

    name: 'App',

    components: {
        TopMenu
    }
}
</script>
    
<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

Step 7: Create Routes.js File

This will be our router file, Which was made manually just for a separate router file. In this file, all components will register with the given and component import name. Then after it will export.

src/routes.js

import HomeDashbaord from './components/HomeDashbaord'
import RegistrationForm from './components/RegistrationForm'
import ContactForm from './components/ContactForm'

const routes = [
    { path: '/', component: HomeDashbaord },
    { path: '/registration', component: RegistrationForm },
    { path: '/contact', component: ContactForm },
];

export default routes;

Step 8: Config main.js File

The routes.js the file will import here. You can see i importing by import routes from './routes';

Also import vue router from vue router like import VueRouter from 'vue-router'; and use it Vue.use(VueRouter);

Then I registered my router and append it in Vue.

src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes
});

Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

So follow the above process and Learn how to use routes in the vue application, Just take a simple example from this post and follow each step process.

Thanks for reading our...

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)