close

Routing અને .js Navigation માં Vue- એક વ્યાપક માર્ગદર્શિકા

Routing અને વેબ એપ્લિકેશનમાં પૃષ્ઠો બનાવવા અને તેમની વચ્ચે નેવિગેટ કરવા માટે .js Navigation માં આવશ્યક ખ્યાલો છે. .js માં સિસ્ટમનું સંચાલન કરવા માટે એક શક્તિશાળી અને લવચીક પુસ્તકાલય છે. Vue Vue Router routing Vue

 

route અહીં .js માં s થી સંબંધિત મૂળભૂત ખ્યાલો છે Vue:

  1. Route: A route પાથને વ્યાખ્યાયિત કરે છે અને તેને અનુરૂપ ઘટક સાથે લિંક કરે છે. દરેકનો route એક પાથ અને એક ઘટક છે.

  2. Vue Router: .js માં s ને મેનેજ કરવા માટે એક પુસ્તકાલય છે. તે એપ્લિકેશનમાં s ને વ્યાખ્યાયિત કરવા અને મેનેજ કરવા માટે સાધનો પ્રદાન કરે છે. Vue Router route Vue route Vue

  3. Route ઘટક: દરેકમાં route અનુરૂપ ઘટક હોય છે. જ્યારે a route સક્રિય થાય છે, ત્યારે સંકળાયેલ ઘટક પ્રદર્શિત થશે.

  4. ડાયનેમિક Route: ડાયનેમિક route તમને route ડાયનેમિક પેરામીટર્સ સાથે s ને વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે. ઉદાહરણ તરીકે, તમે route અનુરૂપ id સાથે વપરાશકર્તાની માહિતી પ્રદર્શિત કરવા માટે "/user/:id" પાથ સાથે વ્યાખ્યાયિત કરી શકો છો.

  5. નેસ્ટેડ Route: નેસ્ટેડ એ એક ખ્યાલ છે જે તમને માતા-પિતાની અંદર route બાળકનો માળો બાંધવા દે છે. આ તમને જટિલ બંધારણો બનાવવા અને ઘટકોને નેસ્ટેડ રીતે ગોઠવવા માટે સક્ષમ કરે છે. route route route

  6. રીડાયરેક્ટ Route: રીડાયરેક્ટ route તમને યુઝર્સને એક પાથથી બીજા પાથ પર રીડાયરેક્ટ કરવાની મંજૂરી આપે છે. જ્યારે તમે route વપરાશકર્તાઓને જૂના પાથમાંથી નવા માર્ગ પર જવા માંગતા હોવ ત્યારે આ ઉપયોગી છે.

  7. Route ગાર્ડ: route રક્ષક એ એક કાર્ય છે જે તમને s ની ઍક્સેસ તપાસવા અને નિયંત્રિત કરવાની મંજૂરી આપે છે route. ગાર્ડ્સનો ઉપયોગ કરીને route, તમે વપરાશકર્તાઓને ચોક્કસ route s એક્સેસ કરતા અટકાવવા માટે શરતો વ્યાખ્યાયિત કરી શકો છો અથવા રીડાયરેક્શન પહેલાં વિશેષ હેન્ડલિંગ કરી શકો છો.

 

ઉપયોગ કરવા માટે, તમે આ પગલાંને અનુસરી શકો છો: Vue Router

પગલું 1: npm અથવા યાર્નનો ઉપયોગ કરીને ઇન્સ્ટોલ કરો: Vue Router 

npm install vue-router

અથવા 

yarn add vue-router

પગલું 2: પ્રોજેક્ટની રૂટ ડિરેક્ટરીમાં ફાઇલ બનાવો. આ ફાઇલમાં, અમે એપ્લિકેશનના s ને જાહેર અને ગોઠવીશું. router.js route 

import Vue from 'vue';  
import VueRouter from 'vue-router';  
  
Vue.use(VueRouter);  
  
const router = new VueRouter({
  routes: [  
    // Declare routes here  
  ]  
});  
  
export default router;

પગલું 3: ફાઇલમાં main.js, આયાત કરો અને તેને એપ્લિકેશન સાથે લિંક કરો: Vue Router Vue 

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

પગલું 4: ફાઇલમાં, તમે, , અને અન્ય ગુણધર્મો જેવા ઘટકોનો ઉપયોગ કરીને s જાહેર કરી શકો છો. router.js route Vue Router path component

ઉદાહરણ તરીકે, તમે route હોમ પેજ માટે a અને route લગભગ પેજ માટે નીચે પ્રમાણે જાહેર કરી શકો છો:

import Home from './components/Home.vue';  
import About from './components/About.vue';  
  
const router = new VueRouter({
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About }  
  ]  
});

પગલું 5: ઘટકોમાં Vue, તમે ઘટકોનો ઉપયોગ કરી શકો છો જેમ કે અન્ય s સાથે લિંક્સ બનાવવા અને વર્તમાનની સામગ્રી પ્રદર્શિત કરવા માટે. <router-link> route <router-view> route

ઉદાહરણ તરીકે, હોમ ઘટકના નમૂનામાં, તમે વિશે પૃષ્ઠની લિંક બનાવવા માટે ઉપયોગ કરી શકો છો: <router-link> 

<router-link to="/about">Go to About</router-link>

એપ્લિકેશન ઘટકના નમૂનામાં, તમે વર્તમાનની સામગ્રી પ્રદર્શિત કરવા માટે ઉપયોગ કરી શકો છો: <router-view> route 

<router-view></router-view>

આ પગલાંઓ સાથે, તમે તમારી .js એપ્લિકેશનને મેનેજ કરવા માટે સેટઅપ કર્યું છે અને તેનો ઉપયોગ કર્યો છે. Vue Router routing navigation Vue