How to Use Routing in Vue.js ?

Vue Router helps link between the browser's URL/History and Vue's components allowing for certain paths to render whatever view is associated with it. A vue router is used in building single-page applications (SPA).

The vue-router can be set up by default while creating your new project. In this article, we will install it separately. So we can see how it works.

Project Setup and Module Installation:

• Step 1: Vue Router can be installed through Npm with the package named vue-router using below command.

  npm install vue-router // OR 
  vue add router 

  It can be used via a script tag as shown below.

  <script src="https://unpkg.com/[email protected]/dist/vue-router.global.js"></script>

• Step 2: Create our Vue project using the following command.

  vue create router-page 

• Step 3: After creating our project we will add our Vue router using the following command.

  vue add router

Project Structure: It will look like this.

Creating a Vue.js Project with Routing

This project uses Vue Router to add navigation in a Vue.js application. It shows how to switch between pages like Home, About, and Profile without reloading.

• Navigation is handled with <router-link>, while <router-view> dynamically loads the active component.
• This setup demonstrates the basics of client-side routing in Vue.

Main.js : Project Initialization File

• This file initializes Vue, connects the router, and mounts the app to the #app element.

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

views/Home.vue: Home Component

• This is the home page view.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

views/About.vue: About Component

• This is the about page view.

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

views/Profile.vue: Profile Component

• This is the profile page view.

<template>
  <div class="profile">
    <h1>This is a profile page</h1>
  </div>
</template>

router/index.js: Router Configuration

• Here we define all our routes (Home, About, Profile).

// Requiring module
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    //  Added our new route file named profile.vue
    {
        path: '/profile',
        name: 'Profile',
        Component: Profile

    },
    {
        path: '/about',
        name: 'About',
        // The route level code-splitting
        // this generates a separate chunk 
        // (about.[hash].js) for this route
        // which is lazy-loaded when the
        // route is visited.
        component:()=> import(
            /* webpackChunkName: "about" */ 
            '../views/About.vue'
        )
    },
]

// Create Vue Router Object
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

Step to run the application: Run the server using the following command.

npm run serve

Output: Open your browser and go to http://localhost:8080/ you will see the following output.