રાઉટીંગ (Routing) ​

ક્લાયન્ટ-સાઇડ વિરુદ્ધ સર્વર-સાઇડ રાઉટીંગ ​

સર્વર બાજુ પર રાઉટીંગનો અર્થ એ છે કે વપરાશકર્તા જે URL પાથની મુલાકાત લઈ રહ્યો છે તેના આધારે સર્વર પ્રતિસાદ (response) મોકલે છે. જ્યારે આપણે પરંપરાગત સર્વર-રેન્ડર્ડ વેબ એપ્લિકેશનમાં લિંક પર ક્લિક કરીએ છીએ, ત્યારે બ્રાઉઝર સર્વર પાસેથી HTML પ્રતિસાદ પ્રાપ્ત કરે છે અને નવા HTML સાથે સમગ્ર પેજને ફરીથી લોડ કરે છે.

જો કે, સિંગલ-પેજ એપ્લિકેશન (Single-Page Application) (SPA) માં ક્લાયન્ટ-સાઇડ JavaScript નેવિગેશનને અટકાવી શકે છે, ગતિશીલ રીતે નવો ડેટા મેળવી શકે છે અને સંપૂર્ણ પેજ રીલોડ કર્યા વિના વર્તમાન પેજને અપડેટ કરી શકે છે. આના પરિણામે સામાન્ય રીતે વધુ ઝડપી વપરાશકર્તા અનુભવ મળે છે, ખાસ કરીને એવા કિસ્સાઓ માટે કે જે વાસ્તવિક "એપ્લિકેશન્સ" જેવા વધુ હોય છે, જ્યાં વપરાશકર્તા લાંબા સમય સુધી ઘણી બધી ક્રિયાપ્રતિક્રિયાઓ કરે તેવી અપેક્ષા રાખવામાં આવે છે.

આવા SPAs માં, "રાઉટીંગ" ક્લાયન્ટ બાજુએ, બ્રાઉઝરમાં કરવામાં આવે છે. ક્લાયન્ટ-સાઇડ રાઉટર બ્રાઉઝર APIs જેમ કે History API અથવા hashchange ઇવેન્ટ નો ઉપયોગ કરીને એપ્લિકેશનના રેન્ડર કરેલા વ્યુને મેનેજ કરવા માટે જવાબદાર છે.

સત્તાવાર રાઉટર (Official Router) ​

Vue SPAs બનાવવા માટે ખૂબ જ અનુકૂળ છે. મોટાભાગના SPAs માટે, સત્તાવાર રીતે સપોર્ટેડ Vue Router લાઇબ્રેરી નો ઉપયોગ કરવાની ભલામણ કરવામાં આવે છે. વધુ વિગતો માટે, Vue Router ના દસ્તાવેજો જુઓ.

શરૂઆતથી (from Scratch) સાદું રાઉટીંગ ​

જો તમને માત્ર ખૂબ જ સાદા રાઉટીંગની જરૂર હોય અને તમે ફુલ-ફીચર્ડ રાઉટર લાઇબ્રેરીનો સમાવેશ કરવા માંગતા ન હોવ, તો તમે ડાયનેમિક કમ્પોનન્ટ્સ સાથે તેમ કરી શકો છો અને બ્રાઉઝરની hashchange ઇવેન્ટ્સ સાંભળીને અથવા History API નો ઉપયોગ કરીને વર્તમાન ઘટક સ્થિતિને અપડેટ કરી શકો છો.

અહીં એક સામાન્ય ઉદાહરણ છે:

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

const currentPath = ref(window.location.hash)

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>

<template>
  <a href="#/">હોમ (Home)</a> |
  <a href="#/about">વિશે (About)</a> |
  <a href="#/non-existent-path">તૂટેલી લિંક</a>
  <component :is="currentView" />
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || '/'] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
		  this.currentPath = window.location.hash
		})
  }
}
</script>

<template>
  <a href="#/">હોમ (Home)</a> |
  <a href="#/about">વિશે (About)</a> |
  <a href="#/non-existent-path">તૂટેલી લિંક</a>
  <component :is="currentView" />
</template>