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 ஐ நிர்வகிப்பதற்கான ஒரு நூலகம். இது ஒரு பயன்பாட்டில் களை வரையறுத்து நிர்வகிப்பதற்கான கருவிகளை வழங்குகிறது. Vue Router route Vue route Vue

  3. Route கூறு: ஒவ்வொன்றும் route தொடர்புடைய கூறுகளைக் கொண்டுள்ளது. a route செயல்படுத்தப்படும் போது, ​​தொடர்புடைய கூறு காட்டப்படும்.

  4. டைனமிக் Route: டைனமிக் அளவுருக்கள் மூலம் s ஐ route வரையறுக்க ஒரு டைனமிக் உங்களை அனுமதிக்கிறது route. route எடுத்துக்காட்டாக, தொடர்புடைய ஐடியுடன் பயனர் தகவலைக் காண்பிக்க "/user/:id" என்ற பாதையுடன் a ஐ வரையறுக்கலாம் .

  5. உள்ளமை Route: ஒரு உள்ளமை என்பது ஒரு பெற்றோருக்குள் route குழந்தைகளை கூடுகட்ட உங்களை அனுமதிக்கும் ஒரு கருத்தாகும். இது சிக்கலான கட்டமைப்புகளை உருவாக்கவும், உள்ளமைக்கப்பட்ட முறையில் கூறுகளை ஒழுங்கமைக்கவும் உங்களை அனுமதிக்கிறது. route route route

  6. வழிமாற்று Route: ஒரு வழிமாற்றம் route பயனர்களை ஒரு பாதையிலிருந்து மற்றொரு பாதைக்கு திருப்பிவிட உங்களை அனுமதிக்கிறது. route நீங்கள் பழைய பாதையில் இருந்து புதிய பாதைக்கு பயனர்களை விரும்பும் போது இது பயனுள்ளதாக இருக்கும் .

  7. Route காவலர்: route காவலர் என்பது, sக்கான அணுகலைச் சரிபார்க்கவும் கட்டுப்படுத்தவும் உங்களை அனுமதிக்கும் ஒரு செயல்பாடாகும் route. காவலர்களைப் பயன்படுத்துவதன் மூலம் route, பயனர்கள் சிலவற்றை அணுகுவதைத் தடுக்க route அல்லது திசைதிருப்பப்படுவதற்கு முன் சிறப்புக் கையாளுதலைச் செய்ய நீங்கள் நிபந்தனைகளை வரையறுக்கலாம்.

 

பயன்படுத்த, நீங்கள் பின்வரும் படிகளைப் பின்பற்றலாம்: Vue Router

படி 1: npm அல்லது நூலைப் பயன்படுத்தி நிறுவவும்: Vue Router 

npm install vue-router

அல்லது 

yarn add vue-router

படி 2: திட்டத்தின் ரூட் கோப்பகத்தில் ஒரு கோப்பை உருவாக்கவும். இந்த கோப்பில், பயன்பாட்டின் களை அறிவித்து கட்டமைப்போம். 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 போன்ற கூறுகளைப் பயன்படுத்தலாம். <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