HTML
JAVASCRIPT
CSS
PYTHON
SQL
JAVA
GO
REACT
NODEJS
AWS
GENERATIVE AI
AI
GIT
SWIFT
KOTLIN
TYPESCRIPT
ANGULAR
BLOCKCHAIN
CYBERSECURITY
MACHINE LEARNING
C
C PLUS
QUANTUM COMPUTING
DSA
AGENTIC AI
AZURE
GCP
VUE JS
POSTGRESQL
DJANGO

Vue js Router

Details

In Vue, routing is the technique used to move between multiple sections of a single-page application without refreshing the entire browser tab. This mechanism helps control what appears on the screen based on the browser's address bar.

Switching Sections with Component Logic

Initially, imagine changing views through variable-based component toggling:

E.g., Two View Modules

Meal.vue:

<template>   
     <h1>Delicious Choices</h1>   
     <p>Explore a wide range of edibles.</p> 
</template>

Wildlife.vue:

<template>   
     <h1>Nature's Creatures</h1>   
     <p>Discover diverse species every year.</p> 
</template>

Root Component:

<template>   
      <p>Select the content block:</p>   
      <button @click="currentView = 'Wildlife'">Animals</button>   
      <button @click="currentView = 'Meal'">Food</button>    

      <div>     
         <component :is="currentView" />   
      </div> 
</template>  

<script> 
export default {   
    data() {     
      return {       
         currentView: ''     
       }   
    } 
 } 
</script>

While this lets users shift between screens visually, it doesn't change the URL, making direct links impossible.

Navigating by Web Path

Vue empowers developers to build SPAs, where different views are rendered inside a single .html base file. This is where Vue Router steps in.

With routes in place, app sections become addressable, enabling path-based access like /meal or /wildlife.

Bringing in Routing Tools

Use the following command to set up the necessary routing module:

npm install vue-router@4

Setup in Entry Point

Now modify main.js to include path-handling capabilities:

import { createApp } from 'vue' 
import { createRouter, createWebHistory } from 'vue-router'  

import App from './App.vue' 
import Meal from './components/Meal.vue' 
import Wildlife from './components/Wildlife.vue'  

const router = createRouter({   
    history: createWebHistory(),   
    routes: [     
       { path: '/wildlife', component: Wildlife },     
       { path: '/meal', component: Meal }   
     ]
 })  

const app = createApp(App) 
app.use(router) 
App.mount('#app')

Router View Port

Swap out dynamic loading for a dedicated render placeholder. Use this in your primary component to display whatever is matched by the path:

<template>   
      <p>Choose your page section:</p>   
      <router-view /> 
</template>

The component replaces itself with the appropriate content based on the current URL route.

Replace Buttons with Smart Links

The element replaces traditional buttons or anchor tags and automatically manages active states:

<template>   
       <p>Choose your page section:</p>   
       <router-link to="/wildlife">Animals</router-link>   
       <router-link to="/meal">Food</router-link>   
       <router-view /> 
</template>

Customize Link Appearance

Since is transformed into an tag, we can apply tailored CSS to enhance its appearance and signal active selection:

<style scoped> 
a {   
   padding: 6px;   
   margin: 10px;   
   background-color: navy;   
   border: 1px solid navy;   
   color: white;   
   text-decoration: none; 
} 
a:hover, 
a.router-link-active {   
     background-color: chocolate; 
} 
</style>

Vue's routing method ensures a smooth, no-refresh experience while also allowing sections of an app to be directly linkable, sharable, and bookmarkable.

Prefer Learning by Watching?

Watch these YouTube tutorials to understand VUE JS Tutorial visually:

What You'll Learn:
  • 📌 Vue JS 3 Tutorial for Beginners #8 - The Vue Router
  • 📌 Vuejs Tutorial #8 - Vue Router
Previous Next